vue使用國際化

轉載請注明作者與出處

一：安裝vue-i18n

npm install vue-i18n --save

二：定義不同語言的json語言包

一般把它放到npm工程中的src目錄下，因為這個目錄是要進行編譯的，而我們是需要把這些語言包全部編譯進去

我們在src建立一個local文件夾，然后建立兩個文件

• language-en.js 英文
• language-cn.js 中文

我們不一定非要按照國際語言規范來命令，比如我們直接命名為abc.js也可以，只需要在對應的關系中讀取這個js文件即可

export const message  = {
  global : {
    view : "view",
    configList : "config list"
 },
 index : {
     xx : "xx"
 }
}

export const message  = {
  global : {
    view : "視圖",
    configList : "配置列表"
 },
 index : {
     xx : "xx"
 }
}

需要注意的是，對應的json結構需要保持一至，因為是要按照key來讀取相應的value

三：配置json語言包

在main.js在配置

import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-cn',//這個配置的是默認的語言包
  messages: {
    'zh-cn': require('./local/language-zh.js'),   // 中文語言包
    'en': require('./local/language-en.js')    // 英文語言包
  },
});

new Vue({
  el: '#app',
  i18n : i18n,
});

四：使用語言包

既然我們配置了語言包，那我們使用的過程中，肯定就不能自己寫文本內容了，而是要使用相應的key來定義

在html中使用

<div slot="header" class="clearfix">
    <span>{{$t("message.global.view")}}</span>
</div>

在vue表達式中使用

<pie-data :text="$t('message.index.configNumber')">202</pie-data>

在js中使用

注意：這個this是指vue對象

{required : true , message : this.$t('message.config.addForm.tips.versionNotNull'),trigger : "blur"}