vue專案支援多語言 vue i18n

vue-i18n 是乙個vue外掛程式，主要作用就是讓專案支援國際化多語言。首先我們引入這個外掛程式：

import vue from
'vue
'import vue18n 
from
'vue-i18n
'vue.use(vuei18n);

vue外掛程式的使用方法，通過全域性方法vue.use()使用外掛程式。

外掛程式通常會為vue新增全域性功能。外掛程式的範圍沒有限制-一般有下面幾種：新增全域性方法或者屬性；新增全域性資源；指令/過濾器/過渡等；通過全域性mixin方法新增一些元件選項；新增vue例項方法，通過把它們新增到vue.prototype上實現。

vue.js的外掛程式應當有乙個公開方法install,通過**可以更直觀的看出外掛程式提供的功能：

//
1 新增全域性方法或者屬性
vue.myglobalmethod=function
(){}
//2 新增全域性資源
vue.directive('my-directive',
});//
3 注入元件
vue.mixin(
});//
4 新增例項發方法
vue.prototype.$mymethods=function(methodoptions){}

import vue from 'vue'import vuei18n from 'vue-i18n'

const messages=},

cn:}

};const i18n=new

vuei18n();

//output

可以看到，我們再例項化vue的時候，將i18n當作乙個options傳了進去。之後我們就可以在vue的元件裡使用i18n了，使用方法主要是兩種：

1 在元件的template中，使用$t()方法

2 在元件的script中，使用this.$i18n.$t()

新增locales資料夾

messages是乙個包含了多語言的物件，它就像哦我們的字典。可以新建乙個locales資料夾，存放作於跟我們語言相關的**。目前包含三個檔案:index.js en.js cn.js

en.js 和cn.js是我們的語言包，是乙個json形式。

index.js

import vue form 'vue'import vuei18n from 'vue-i18n'import en from './en.js'import cn from './cn.js'
const default_lang='cn';
const locale_key='localelanguage';
const locales=;
const i18n=new
vuei18n();
export const setup=(lang)=>
}　　window.localstorage.setitem(locale_key,lang);
object.keys(locales).foreach(
function
(lang)`);
});document.body.classlist.add(`lang-$`);
document.body.setattribute('lang',lang);
i18n.locale=lange;
vue.config.lang=lang;　
}setup();
export 
default i18n;

我們對外提供乙個setup的方法，給使用者修改當前使用語種的能力。同時，我們在setup裡還做了三件事：

將當前語種存在localstorage中，儲存使用者的使用習慣；給body新增語種相關的class，因為不同語言可能導致排版出現差異，我們還需要配置，將當前語種存在

vue的全域性配置中，以便未來可能的使用。

最後在main.js中引入這個index.js就可以了

import vue from 『vue』
import i18n from '@/locales'
vue例項外的js**中的額文字怎麼替換？
vue例項中我們可以使用this.$i18n.t,這裡的this是vue的例項，那專案中的很多js**在vue的例項之外。最簡單的方法就是咋需要
使用的地方手動直接import i18n
這樣在vue例項中使用this.$i18n.t,如果不是就先import ，使用i18n.t,這樣顯然複雜了。
為了解決這個問題，最直接的辦法就是把i18n直接掛載在window下，變成全域性變數。我們就不需要import了，直接使用i18n.t就可以了；
在main.js:
import i18n from '@crm/locales'...
window.i18n =i18n
newvue({
i18n,
router,
store,
然而我們將元件中的import i18n全去掉，並將this.$i18n.t改成i18n.t.專案跑起來之後就報錯了:i18n is not defined
顯然是元件在呼叫i18n的時候，i18n還沒有掛載到window上，所以執行順序出了問題：
//假設webpack的入口檔案是```main.js```
import modulea from 'modulea'console.log(1)
import moduleb from 'moduleb'console.log(2) //
modulea.js
console.log(3) //
moduleb.js
console.log(4) //
最終在瀏覽器中列印出的數字順序是: 34
12

跟es6 module的機制有關係。import命令具有提公升效果，會提公升到整個模組的頭部，首先執行，這種行為的本質是，import命令是編譯階段執行的，在**執行之前。

window的**還沒有執行。import中的script**執行完之後才到main.js中其他的js**，我們首先將window.i18n=i18n移到locales/index中，然後調整main.js中的import的順序：

//
locales/index
...setup()
window.i18n =i18n
export 
default
i18n

參考：

vue專案支援多語言 vue i18n

vue多語言外掛程式vue i18n

iOS支援多語言

inno 多語言支援

vue專案支援多語言 vue i18n

vue多語言外掛程式vue i18n

iOS支援多語言

inno 多語言支援

相關推薦