如何在Vue+Element项目中配置国际化

Vue I18n

• Vue.js 的国际化插件
• 官网地址建议通读。
• 使用前需要先在项目中install Vue-i18n

1 创建i18n文件夹

在项目根目录，即src目录项创建i18n目录，此目录下用于存放多语言的翻译如zh.js存储中文翻译,en.js存储英文翻译，id.js 存储印尼语等。

// en.js
export default {
  basic: {
    a: "Hello Word!"
  }
}

// zh.js
export default {
  basic: {
    a: "你好~ 世界!"
  }
}

2 创建preset文件夹

在项目根目录，即src目录下面创建preset目录，此目录下用于存放插件配置项预设，例如i18n.ts,router.ts,store.ts。
这里的i18n.ts 主要是为了引入 Vue-i18n且创建i18n实例。

import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "../i18n/en";
import zhLocale from "../i18n/zh";

Vue.use(VueI18n);

// lang 可以根据项目头上的切换语言组件选择的语言来决定
const locale = process.env.lang || "zh_CN";

const messages = {
  "en-us": enLocale,
  "zh_CN": zhLocale
};

const i18n = new VueI18n({
  locale,
  messages
});

// 项目中有些地方请求数据可能用到
localStorage.setItem("locale", locale);
export default i18n;

最后在vue 入口文件main.js中在 Vue创建实例的时候挂载i18n

import Vue from "vue";
import App from "./App";
import i18n from "./preset/i18n";

//部分其他省略
//....

new Vue({
  el: "#app",
  router,
  i18n,
  components: { App },
  template: "<App/>"
});

在组件中如下使用

<template>
  <div class="hello">
    {{ $t("basic.a") }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

效果图如下