vue中开发多语言（国际化）

前言：我们有时候会遇到一个项目需要支持多语言，而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需要用到 i18n ，这个插件的作用是创建这个自己的字典，使其切换语言时用到的文案是自己编写的，这样就可以做到实现自己想表达的效果.

话不多说，直接上源码：

第一步：

先安装依赖啦

npm install vue-i18n -save

前言里我们说到这个插件是让我们引用自己的字典文件，所以这里我们要插件字典文件夹具体取名，自己决定，这里以lang作为文件夹名，en和zh等作为字典文件名。在src目录下新建lang目录，为每个vue页面编写多语言js文件，我们仅以中文zh.js和英文en.js为例。

例如我这里仅展示admin页面的英文字典文件写法

然后把它在lang根目录的同语言文件导入，并随其它文件一起导出：

第三步：

在lang目录下创建一个index.js文件，用作多语言的查找和控制功能。
对字体文件的切换我这边是利用Cookies的形式进行，先在index.jd引入插件和这些字典文件，然后我们在引入插件的下方进行配置

import { createI18n } from 'vue-i18n'
import en from './en'
import zhCn from './zhCn'
import Cookies from 'vue-cookies'

const messages = {
  en: {
    ...en
  },
  zh: {
    ...zhCn
  }
}
export function getLanguage () {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage
  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}

const localeData = {
  globalInjection: true, // 如果设置true, $t() 函数将注册到全局
  legacy: false, // 如果想在composition api中使用需要设置为false
  // 默认语言
  // locale: settings.defaultLanguage,
  locale: localStorage.getItem('language') || 'zh',
  messages // set locale messages
}

export const i18n = createI18n(localeData)
export const setupI18n = {
  install (app) {
    app.use(i18n)
  }
}

然后挂载到vue上

import { setupI18n } from '@/lang'
// i18n
app.use(setupI18n)

第四步：

定义切换的数据：

<div class="switch-language">
        <el-dropdown @command="handleSetLanguage">
          <span class="el-dropdown-link">
            语言<el-icon><CaretBottom /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                :disabled="language==='zh'"
                command="zh"
              >
                中文
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="language==='en'"
                command="en"
              >
                English
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

在用户点击切换语言的时候 调用方法更改Cookies里的值：

// 切换语言
const handleSetLanguage = (lang) => {
  Cookies.set('cloudLanguage', language)
  window.location.reload()
}

这样就可以起到切换的作用了.

最后：

接下来就是最后在页面上的写法了，这里是插件的统一写法用$t的方式，以admin页面下中的add变量为例：

<template>
　　<div>　　
  　　<h1>{
    { $t("admin.add") }}</h3>
　　</div>
</template>

还有这里官方文档给出的基本方法：

$t：普通词
$tc：单复数
$te：check 翻译key是否存在
$d：时间日期
$n：货币数字

用$t就好了 要是你要求规范就按文档的规范来，到这里后就可以开始我们的国际化开发啦。