18n使用

1.安装

npm install vue-i18n@8 //vue2使用vue-i18n@8 vue3使用vue-i18n@9

2.在utils/lang下创建en-US.js,zh-CN.js

en-US.js
module.exports={
     index:{
          language:'language'
     }
}
zh-CN.js
module.exports={
     index:{
          language:'语言'
     }
}

3.在main.js引入

import VueI18n from 'vue-i18n'

import enUS from 'utils/lang/en-US.js';        // 英文语言文件
import zhCN from 'utils/lang/zh-CN.js';        // 中文语言文件

Vue.use(VueI18n)

const i18n = new VueI18n({
     locale: 'zh-CN',   //默认语言
     messages: {
          'en-US': enUS,
          'zh-CN': zhCN
     }
})

Vue.prototype._i18n = i18n;

const app = new Vue({
     i18n,
     ...App,
});

4.在页面中使用

<view>{{ i18n.language }}</view>
<button type="primary" @click="handellanguage">语言切换</button>


computed: {
     i18n() {
          return this.$t('index');
     }
},
methods: {
     handellanguage(){
          console.log(this._i18n.locale)
          switch (this._i18n.locale){
               case 'zh-CN':
               this._i18n.locale = "en-US";
          break;
          default:
               this._i18n.locale = "zh-CN";
          break;
          }
     }
}