Vue中使用vue-i18插件实现多语言

官方地址、 原文

在基于 vue-cli 项目开发过程中，多语言切换功能可使用 vue-i18 插件

1. 引入 vue-i18 插件

   npm install vue-i18n --save-dev

2. 创建 cn.js 和 en.js 文件我的目录结构

   src/assets/lang/cn.js

   // cn.js
   const baseReport = {
     code: "报表编号"
   };
   export { baseReport };
   

   src/assets/lang/en.js

3. 在项目的入口文件 main.js 中引入 vue-i18n 插件

   import Vue from "vue";
   import App from "./App";
   import router from "./router";
   import ElementUI from "element-ui";
   import store from "./store";
   import "element-ui/lib/theme-chalk/index.css";
   import "@/mock";
   import VueI18n from "vue-i18n"; // 引入vue-i18
   
   Vue.config.productionTip = false;
   Vue.use(ElementUI);
   Vue.use(VueI18n);
   // new vue-i18 实例
   const i18n = new VueI18n({
     locale: "cn", // 这个配置的是默认的语言包
     messages: {
       cn: require("./assets/lang/cn") // 中文语言包
     }
   });
   
   /* eslint-disable no-new */
   new Vue({
     el: "#app",
     router,
     store,
     // i18的对象进行加载app对象中全局使用
     i18n: i18n,
     components: { App },
     template: "<App/>"
   });
   

4. 创建好引入的 cn.js 后开始进入代码 所有 vue 文件都不在需要引入

   • 在标签内作为正文内容 <div class="title">{{$t('baseReport.code')}}</div>

   • 作为标签属性使用 <input :placeholder="$t('baseReport.code')" type="text">

   • 作为 js 中文字使用时 console.log(this.$t('content.main'));

5. 页面上进行中英文切换，在中英文切换的按钮上绑定事件

   tabEn() {
   this.$i18n.locale = 'en'
   },
   tabCn() {
   this.$i18n.locale = 'cn'
   }