vue 國際化 vue-i18n

1.安裝

npm install vue-i18n --save

2.在main.js中引用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) ;
new Vue({
  el: '#app',
  i18n, 
  router,
  template: '<App/>',
  components: { App }
})

3.新建語言包

zh.js中文語言包：

export const lang = {
home:"首頁"
}

en.js 英文語言包：

export const lang = {
  home:"Home"
}

4.切換語言事件

  //中英文切換
      changeLangEvent(val){
        var _=this
        console.log("_.val",val)
        if (val == 2 ) {
          _.$i18n.locale = 'en-US';//關鍵語句
          console.log('en-US')
        }else {
          _.$i18n.locale = 'zh-CN';//關鍵語句
          console.log('zh-CN')
        }
       

      },

5.使用

靜態渲染：
<p>{{$t('lang.btnSoftware')}}</p>

如果是element-ui 的，在要翻譯的前面加上冒號
比如：label="用戶姓名" 就改成 :label="$t('order.userName')"

在data中使用：
   this.messageOpen(_this.$t('lang.pleaseenter')+_this.$t('lang.Runpathimmediately'))

標註：在data中定義了_this.$t('lang.pleaseenter')後，切換語言後沒有渲染切換後的數據，用computed解決

computed: {
      rules:function () {
       return (
         {
           name: [{
             required: true,
             /*message: `請填寫軟件名稱`,*/
             message: this.$t('lang.pleaseenter')+this.$t('lang.nameofsoftware'),
             trigger: 'blur'
           }],
       
         }
       )

      }
    },
注意：如果rules在computed中定義了，就不能在data中再定義，否則會報重複定義錯誤