vue项目国际化，中英切换

一、安装 vue-i18n插件

npm i vue-i18n

二、main.js文件的配置

import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) // 通过插件的形式挂载
 
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }

三、创建中英文件

en.js 英文语言包：

module.exports = { 
    girl: 'Girl',//女孩
}  

zh.js中文语言包：

module.exports = {
    girl: '女孩',
}  

四、绑定点击事件，来修改 locale 的值去调用对应的语言切换。

changeLangEvent (use) {
      if (use == '中文') {
       
        this.lang = "zh-CN";
        this.$i18n.locale = this.lang; //关键语句
        console.log(this.lang )
       
      } else {
         this.lang = "en-US";
        this.$i18n.locale = this.lang; //关键语句
      }
    }

五、vue-i18n 数据渲染的模板语法

我们知道 vue 中对于文字数据的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。

<div class="holl">{{$t('girl')}}</div>
    <el-select v-model="value" placeholder="中文" >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click.native="changeLangEvent(item.label)"></el-option>
    </el-select>