vue使用多語，最常見的就是 vue-i18n,但是如果開發中的多語很少，比如就不到10個多語，這樣就沒必要引入vue-i18n了， 引入了反正導致程式碼體積大了，這時候單純用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實踐---vue不依賴外部資源實現簡單多語操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。