vue-i18n 倉(cāng)庫(kù)地址：https://github.com/kazupon/vue-i18n
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括依蘭網(wǎng)站建設(shè)、依蘭網(wǎng)站制作、依蘭網(wǎng)頁(yè)制作以及依蘭網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，依蘭網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到依蘭省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
兼容性：
支持 Vue.js 2.x 以上版本
安裝方法：（此處只演示 npm）
npm install vue-i18n
使用方法：
1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）
import VueI18n from 'vue-i18n' Vue.use(VueI18n)
2、準(zhǔn)備本地的翻譯信息
重慶分公司
重慶分公司
const messages = {
zh: {
message: {
hello: '好好學(xué)習(xí)，天天向上！'
}
},
en: {
message: {
hello: 'good good study, day day up!'
}
}
}3、創(chuàng)建帶有選項(xiàng)的 VueI18n 實(shí)例
const i18n = new VueI18n({
locale: 'en', // 語(yǔ)言標(biāo)識(shí)
messages
})4、把 i18n 掛載到 vue 根實(shí)例上
const app = new Vue({
router,
i18n,
...App
}).$mount('#app')5、在 HTML 模板中使用
{{ $t("message.hello") }}
查看運(yùn)行效果：
我們剛才選定的語(yǔ)言標(biāo)識(shí)是 “en” 英語(yǔ)，現(xiàn)在改成 “zh” 中文，并查看效果
const i18n = new VueI18n({
locale: 'zh', // 語(yǔ)言標(biāo)識(shí)
messages
})
這樣就可以輕松實(shí)現(xiàn)國(guó)際化了，實(shí)際開(kāi)發(fā)中，頁(yè)面內(nèi)容肯定是很多的，我們可以把對(duì)應(yīng)語(yǔ)言的信息保存為不同的 json對(duì)象
const i18n = new VueI18n({
locale: 'en', // 語(yǔ)言標(biāo)識(shí)
messages: {
'zh': require('./common/lang/zh'),
'en': require('./common/lang/en')
}
})zh.js
// 注意：一定是 exports，不是 export，否則會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)信息是下列的中的內(nèi)容不是 string
module.exports = {
message: {
title: '運(yùn)動(dòng)品牌'
},
placeholder: {
enter: '請(qǐng)輸入您喜歡的品牌'
},
brands: {
nike: '耐克',
adi: '阿迪達(dá)斯',
nb: '新百倫',
ln: '李寧'
}
}en.js
module.exports = {
message: {
title: 'Sport Brands'
},
placeholder: {
enter: 'Please type in your favorite brand'
},
brands: {
nike: 'Nike',
adi: 'Adidas',
nb: 'New Banlance',
ln: 'LI Ning'
}
}接下來(lái)，在HTML 模板中使用，要特別注意在 js 中的國(guó)際化寫法
// HTML// JS data () { return { brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')] } },{{$t("message.title")}}
- {{brand}}
查看編譯效果：
現(xiàn)在換成英文的：
在上面的操作中，我們都是通過(guò)手動(dòng)修改 locale 的屬性值來(lái)切換語(yǔ)言，實(shí)際上，更希望瀏覽器自動(dòng)識(shí)別，這里可以借助于 cookie
1、新建一個(gè) cookie.js 文件，用于讀取cookie
function getCookie(name,defaultValue) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return defaultValue;
}
export {
getCookie
}2、在 main.js 中引入這個(gè)js，并通過(guò) PLAY_LANG 屬性來(lái)獲取瀏覽器的語(yǔ)言
const i18n = new VueI18n({
locale: getCookie('PLAY_LANG','zh'), // 語(yǔ)言標(biāo)識(shí)
messages: {
'zh': require('./common/lang/zh'),
'en': require('./common/lang/en')
}
})這里需要注意兩個(gè)極易出錯(cuò)的地方：
（1）、將 $t() 寫成了 $()
（2）、json 中在同一個(gè)對(duì)象里有同名屬性
vue-i18n 提供了一個(gè)全局配置參數(shù)叫 “l(fā)ocale”，通過(guò)改變 locale 的值可以實(shí)現(xiàn)不同語(yǔ)種的切換
下面的案例借用了 Element UI 的彈窗樣式，上面的步驟不再贅述，直接上核心代碼
// template{{$t('test')}}
// js方法 changeLocale () { this.$confirm(this.$t('layer.toggle'), this.$t('layer.tips'), { confirmButtonText: this.$t('button.ok'), cancelButtonText: this.$t('button.cancel'), type: 'warning' }).then(() => { let locale = this.$i18n.locale locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' }).catch(() => { this.$message({ type: 'info', }) }) },
效果：
總結(jié)
以上所述是小編給大家介紹的使用 vue-i18n 切換中英文效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
