vue-i18n实现中英文切换

• 下载vue-i18n插件

     npm install vue-i18n
  

• 自定义两个中英文js文件

  • 在项目src目录下创建lang文件夹，lang文件夹内创建en.js和zh.js两个文件
    
  • 中文版JS文件
    
  • 英文版js文件
    

• z在main.js文件内进行配置

  ```
      // 引入中英文切换插件vue-i18n
      import VueI18n from 'vue-i18n'
      
      Vue.use(VueI18n) //挂载
      
      const i18n = new VueI18n({
        locale: 'zh-CN',    // 语言标识
        messages: {
          'zh-CN': require('./lang/zh'),   // 通过require引入中文语言包
          'en-US': require('./lang/en')    // 通过require引入英文语言包
        }
      })
      
      new Vue({
        render: h => h(App),
        router,
        i18n, //切记一定不要忘记这步
      }).$mount('#app')
  ```
  

• 为切换按钮定义点击事件进行语言的切换

    this.$i18n.locale = 'zh-CN'			//切换为中文
  
    this.$i18n.locale = 'en-US'			//切换为英文
  

• 网页内数据渲染的方式

  • 方式一：html内

      - <h3 class="myHotelList-bigTtitle">{{$t('m.hotelList')}}：</h3>
    
      - <el-table-column :label="$t('m.isOfficialRating')" min-width="120" :formatter="formatterRating"></el-table-column>
    

  • 方式二：js内

       data: [
           {
           	name: this.$t('m.jph'),  //前面需添加this
           	value: this.oneData.Jph
           }
        ]