亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作

 更新時(shí)間：2020年09月21日 11:07:19   作者：進(jìn)軍的蝸牛  
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡(jiǎn)單多語(yǔ)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue使用多語(yǔ)，最常見(jiàn)的就是 vue-i18n, 但是如果開(kāi)發(fā)中的多語(yǔ)很少，比如就不到10個(gè)多語(yǔ)，這樣就沒(méi)必要引入vue-i18n了， 引入了反正導(dǎo)致代碼體積大了，這時(shí)候單純用vue實(shí)現(xiàn)多語(yǔ)就是比較好的選擇。

第一步

首先建立一個(gè)locales.js 存放多語(yǔ)語(yǔ)言包的內(nèi)容，這里只寫(xiě)了 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)文章

最新評(píng)論