vue2项目国际化配置

参考文章

1. 安装

npm i vue-i18n@8.22.2

2. 新建文件夹i18n

3. i18n.js代码如下：

// I18n
import VueI18n from "vue-i18n";
import Vue from "vue";
import locale from "element-ui/lib/locale";
import { getLang } from "@/utils/lang";

// 引入 elementui 的多语言
import enLocale from "element-ui/lib/locale/lang/en.js";
import zhCnLocale from "element-ui/lib/locale/lang/zh-CN";
// 如果还有新的语言在下面继续添加

// 引入自己定义的 I18n 文件
import myI18nEn from "./i18n-en.json";
import myI18nZh from "./i18n-zh.json";
// 如果还有新的语言在下面继续添加

// 注册 vue-i18n
Vue.use(VueI18n);

export const getLanguage = () => {
  // 本地缓存获取
  let language = getLang();
  if (language) {
    return language;
  }
  // 浏览器使用语言
  language = navigator.language.toLowerCase();
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  return "zh-cn";
};

// 默认中文
const lang = "zh-CN";
const i18n = new VueI18n({
  locale: getLanguage(),
  messages: {
    // 会把myI18nZh的所有内容拷贝到zhCnLocale文件中
    "zh-CN": Object.assign(zhCnLocale, myI18nZh),
    "en-US": Object.assign(enLocale, myI18nEn),
    // 如果还有新的语言在下面继续添加
  },
});

locale.i18n((key, value) => i18n.t(key, value));
export default i18n;

4. 在main.js引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "element-ui/lib/theme-chalk/display.css";
import "./permission"; // 路由拦截
import i18n from "@/i18n/i18n.js";  //第一步

Vue.use(ElementUI);
Vue.use(i18n);  // 第二步
Vue.config.productionTip = false;
// Vue.prototype.url = "http://1.116.64.64:5004";
Vue.prototype.url = "http://localhost:3000";

new Vue({
  router,
  store,
  i18n,  // 第三步
  render: h => h(App),
}).$mount("#app");

5. 在untils下新建文件lang.js，其内容如下

const langKey = "lang-key";

//存储语言
export const setLang = lang => {
  return localStorage.setItem(langKey, lang);
};
//获取语言
export const getLang = () => {
  return localStorage.getItem(langKey);
};

6. 页面切换语言

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          语言切换
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="zh-CN">中文</el-dropdown-item>
          <el-dropdown-item command="en-US" divided>英文</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

import { setLang } from "@/utils/lang";
handleCommand(command) {
  setLang(command);
  location.reload();
},

6. 页面显示语法

// title
:title="$t('btnBulkOperations')"
 
// js 
this.$i18n.t('username')
 
// 标签，注意冒号
:label="$t('username')"
 
// 输入框中的占位符，注意冒号
:placeholder="this.$t('username')"
 
// 表格标题
:label="$t('username')"
 
// div语法
<div>{{$t("username")}}</div>
 
// 多个key拼接
:placeholder="`${this.$t('userInput')}${this.$t('userPhone')}`"
:label="`${this.$t('indexTablePrimaryKey')} • ${this.$t('wordName')}`"

7. 路由菜单国际化