i18n 多国语

vue-i18n 是一个非常方便使用的第三方插件，它能让 Vue 网页具备切换多国语的功能，并且不会对开发造成过多的负担。

• 1.安装
• 2.写多国语的配置文件
• 3.在入口文件中引用它
• 4.在页面中使用
• 5.切换 i18n
• 6.效果

1.安装

对于 Vue2 可以这样安装

npm install vue-i18n --save

2.写多国语的配置文件

新建存放语言配置的 xxx.js 文件

const i18nMessage = {
  zh: {
    message: {
      systemLogin: "系统登录",
    },
  },
  en: {
    message: {
      systemLogin: "System Login",
    },
  },
};
export default i18nMessage;

3.在入口文件中引用它

import VueI18n from "vue-i18n";
import i18nMessage from "./xxx.js";

// ……

// 加载多语言设置
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "zh", // 默认中文
  messages: i18nMessage,
});

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

4.在页面中使用

只要加上$t 就能使用 i18n 的库了

template 部分

<h3 class="title">{{$t('message.systemLogin')}}</h3>

js 部分

this.$message({
  message: this.$t("message." + data.errorMsg),
  type: "error",
});

5.切换 i18n

this.$i18n.locale = "zh";
// this.$i18n.locale = "en";

6.效果