溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue不依賴外部資源如何實現多語操作？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
第一步
首先建立一個locales.js 存放多語語言包的內容，這里只寫了 zh-CN, en這兩種語言，其他還想新增的話 方法一樣，代碼如下：
export default {
'zh-CN': {
name: '我是中文名字'
},
'en': {
name: 'I am English name'
}
}第二步
通過瀏覽器的語言環境，獲取對應的語言包，并吧語言包值付給 data 中的 locales
data () {
return {
locales: (() => {
// this.lang是父組件傳遞過來的， 這里的意思就是lang 優先使用父組件傳遞的語言，如果沒有傳遞，就使用瀏覽器的語言（navigator.language）
const lang = this.lang || navigator.language
let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
// Object.keys 獲取可枚舉的屬性 如果瀏覽器的語言不是英語 中文， 而且傳遞的lang參數也不是這兩種之一，就默認使用 zh-CN
if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
return locales[useLang]
})(),
}
},這個locales最終返回的是一個對象，比如，如果是中文環境，返回的數據如下：
{
name: '我是中文名字'
}第三步
既然語言包都獲取到了，還剩一個從語言包里面 獲取對應key的方法：
methods: {
$_t (key) {
// this.locales就是上面那個對象
let localeStr = this.locales[key]
return localeStr
}
}通過$_t這個方法，傳入key，就可以獲取到對應的value
總結&優化：
這樣就實現了不用依賴vue-i18n這樣的外部依賴，只使用vue就實現了多語；
$_t 這個方法可以放到 mixins 里面就避免了每次都要引入這個方法。
具體代碼看這里： https://github.com/YalongYan/vue-practice/tree/master/vue-simple-multilingual
補充知識：vue-cli 打包(npm run build) 出現 ERROR in xx..js from UglifyJs Unexpected token: punc (()
之前打包還沒問題，這次就報錯了，后來發現原來是少了 .babelrc 文件， 網上找了好多方法都不行，后來看了之前的項目，原來是少了 .babelrc 文件， 只要在根目錄下建立這個文件， 文件內容如下：
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}文件位置看下圖：
看完上述內容，你們掌握vue不依賴外部資源如何實現多語操作的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
