vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作
vue使用多語(yǔ)，最常見(jiàn)的就是 vue-i18n, 但是如果開發(fā)中的多語(yǔ)很少，比如就不到10個(gè)多語(yǔ)，這樣就沒(méi)必要引入vue-i18n了， 引入了反正導(dǎo)致代碼體積大了，這時(shí)候單純用vue實(shí)現(xiàn)多語(yǔ)就是比較好的選擇。
第一步
首先建立一個(gè)locales.js 存放多語(yǔ)語(yǔ)言包的內(nèi)容，這里只寫了 zh-CN, en這兩種語(yǔ)言，其他還想新增的話 方法一樣，代碼如下：
export default {
'zh-CN': {
name: '我是中文名字'
},
'en': {
name: 'I am English name'
}
}
第二步
通過(guò)瀏覽器的語(yǔ)言環(huán)境，獲取對(duì)應(yīng)的語(yǔ)言包，并吧語(yǔ)言包值付給 data 中的 locales
data () {
return {
locales: (() => {
// this.lang是父組件傳遞過(guò)來(lái)的， 這里的意思就是lang 優(yōu)先使用父組件傳遞的語(yǔ)言，如果沒(méi)有傳遞，就使用瀏覽器的語(yǔ)言（navigator.language）
const lang = this.lang || navigator.language
let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
// Object.keys 獲取可枚舉的屬性 如果瀏覽器的語(yǔ)言不是英語(yǔ) 中文， 而且傳遞的lang參數(shù)也不是這兩種之一，就默認(rèn)使用 zh-CN
if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
return locales[useLang]
})(),
}
},
這個(gè)locales最終返回的是一個(gè)對(duì)象，比如，如果是中文環(huán)境，返回的數(shù)據(jù)如下：
{
name: '我是中文名字'
}
第三步
既然語(yǔ)言包都獲取到了，還剩一個(gè)從語(yǔ)言包里面 獲取對(duì)應(yīng)key的方法：
methods: {
$_t (key) {
// this.locales就是上面那個(gè)對(duì)象
let localeStr = this.locales[key]
return localeStr
}
}
通過(guò)$_t這個(gè)方法，傳入key，就可以獲取到對(duì)應(yīng)的value
總結(jié)&優(yōu)化：
這樣就實(shí)現(xiàn)了不用依賴vue-i18n這樣的外部依賴，只使用vue就實(shí)現(xiàn)了多語(yǔ)；
$_t 這個(gè)方法可以放到 mixins 里面就避免了每次都要引入這個(gè)方法。
具體代碼看這里： https://github.com/YalongYan/vue-practice/tree/master/vue-simple-multilingual
補(bǔ)充知識(shí)：vue-cli 打包(npm run build) 出現(xiàn) ERROR in xx..js from UglifyJs Unexpected token: punc (()
之前打包還沒(méi)問(wèn)題，這次就報(bào)錯(cuò)了，后來(lái)發(fā)現(xiàn)原來(lái)是少了 .babelrc 文件， 網(wǎng)上找了好多方法都不行，后來(lái)看了之前的項(xiàng)目，原來(lái)是少了 .babelrc 文件， 只要在根目錄下建立這個(gè)文件， 文件內(nèi)容如下：
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
文件位置看下圖：
以上這篇vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Router中router.resolve方法使用實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue?Router中router.resolve方法使用的相關(guān)資料,router.resolve方法在前端路由庫(kù)中用于解析路由信息,接受路徑或路由對(duì)象,返回解析后的?URL、路由和位置對(duì)象,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了Vue的列表渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
解決vue打包項(xiàng)目后刷新404的問(wèn)題
下面小編就為大家整理了一篇解決vue打包項(xiàng)目后刷新404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12![vue模塊導(dǎo)入報(bào)錯(cuò)問(wèn)題Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg4.png)
vue模塊導(dǎo)入報(bào)錯(cuò)問(wèn)題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導(dǎo)入報(bào)錯(cuò)問(wèn)題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue+element多選級(jí)聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級(jí)聯(lián)選擇器自定義props使用的相關(guān)資料,級(jí)聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vue3.5版本中最大的改動(dòng)就是響應(yīng)式重構(gòu),重構(gòu)后性能竟然炸裂的提升了56%,本文我們來(lái)講講使用雙向鏈表后,Vue內(nèi)部是如何實(shí)現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下2024-11-11
antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12