vue2中使用 vue-i18n 插件实现页面中英文切换——记录

1. 安装vue脚手架，略

2. 安装插件npm install vue-i18n，建议使用cnpm

3. 在src文件夹下创建lang文件夹存放中英文的语言包。
   en.js是英文包，zh.js是中文包，还可以添加其他的语言包，index.js后面贴图
   

4. index.js文件中的内容：

   import Vue from 'vue' // 引入vue
   import VueI18n from 'vue-i18n' // 引入i18n模块
   import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui英文包
   import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui中文包
   import locale from 'element-ui/lib/locale' // 引入element-ui语言包模块
   import enLocale from './en' // 本地英文包
   import zhLocale from './zh' // 本地中文包
   
   Vue.use(VueI18n) // vue使用i18n模块
   // 引入本地
   const messages = {
     en: {
       ...enLocale, // es6的拓展运算符，相当于解析出每个对象
       ...elementEnLocale
     },
     zh: {
       ...zhLocale,
       ...elementZhLocale
     }
   }
   // 创建国际化实例
   const i18n = new VueI18n({
     locale: window.localStorage.getItem('language') || 'en', // set locale，默认使用英文
     messages // set locale messages
   })
   locale.i18n((key, value) => i18n.t(key, value))
   
   export default i18n
   

5. 在main.js文件中引入index.js文件

6. 在zh.js中配置变量的中文名称 ，在en.js中配置对应变量的英文名称。配置你需要替换的即可。

   注意同一个名称的字段在zh.js与en.js中声明的变量应一样！！！

   // 中文包  zh.js
   export default {
     title: '区块链可视化展示',
     loginTitle: '用户登录',
     account: '账号',
     password: '密码',
     one: {
     	two: '二级'
     }
   }
   
   // 英文包  en.js
   export default {
     title: 'Blockchain visual display',
     loginTitle: 'User login',
     account: 'Account',
     password: 'Password',
     one: {
     	two: 'two class'
     }
   }
   //这四个变量的名字在两个语言包里都是一样的
   

7. 使用方法：

   // 组件中的写法
   <el-button>{{ $t('one.two') }}</el-button> // two是变量名,属于one下面的
   <el-input type="password"  :placeholder="$t('password')"></el-input> // password是变量名
   // js中的用法
   this.title = this.$t('title') // title是变量名
   

8. 切换方式：

   //element-ui
   <el-dropdown class="languageSetting" trigger="click" @command="handleSetLanguage">
     <span class="international-icon">
       {{ language }}<i class="el-icon-caret-bottom" />
     </span>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="zh" :disabled="language === '中文'">中文</el-dropdown-item>
       <el-dropdown-item command="en" :disabled="language === 'English'">English</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
   //js
   computed: {
       language() {
         if (this.$i18n.locale === 'zh') {
           return '中文'
         }
         if (this.$i18n.locale === 'en') {
           return 'English'
         }
         return ''
       }
   },
   methods: {
       handleSetLanguage(language) {
         // 选择语言
         this.$i18n.locale = language
         window.localStorage.setItem('language', language)
       },
   }
   

   

这样就完事了！