npm i -s element-ui vue-i18n js-cookie
複製**
zh.js
export default ,
login: ,
header: ,
footer:
}en.js
export default ,
header: ,
footer: ,
login:
}複製**
import vuei18n from 'vue-i18n'
import enlocale from './en'
import zhlocale from './zh'
const messages = ,
zh:
}const i18n = new vuei18n()
export default i18n
複製**
import vue from 'vue'
import i18n from './lang'
vue.use(i18n)
new vue()
複製**
"common_header">
"12">
}"12">
type="primary" @click="login">}
複製**
在頁面中加入切換語言的控制項：
"language" placeholder="請選擇語言" @change="changelanguage">
"item in languageoptions"
:key="item.value"
:label="item.label"
:value="item.value">
複製**
changelanguage (language)
複製**
切換語言時，頁面將自動完成語言型別的切換。
將language資訊儲存在cookie（之前已經安裝了js-cookie）。初始化從cookie中獲取。
const i18n = new vuei18n()
切換語言時候儲存到cookies
cookies.set('language', language)
複製**
為了方便使用，切換時可以在vuex中儲存language資訊
changelanguage (v)
在state中：
language: cookies.get('language') || 'zh'
複製**
languageoptions
() ,
]} else ,
]} return languageoptions
}複製**
引用element的語言包
import elementenlocale from 'element-ui/lib/locale/lang/en'
import elementzhlocale from 'element-ui/lib/locale/lang/zh-cn'
複製**
const messages = ,
zh:
}複製**
vue.use(i18n)
修改為vue.use(elementui, )
複製**
到這裡關於vue-i18n的使用以及介紹完了。
幾個關鍵點在於實現locale的自動切換、如何使語言資訊（$t()方法）、element-ui元件的多語言實現、相容性等。
語言國際化 vue i18n
安裝依賴包 npm i vue i18n s 在根目錄建立乙個 lang的資料夾,並且在lang資料夾內建立cn.js 和 en.js 開啟 main.js,注入vue例項中 import vue from vue import vuei18n from vue i18n 語言國際化 vue.use...
vue i18n和ElementUI國際化使用總結
vue i18n 安裝 npm install vue i18n 在main.js同級建i18n資料夾，並裡面建i18n.js langs資料夾，langs資料夾下建en.js cn.js 目錄如下 assets logo.png components helloworld.vue i18n i18...
Vue I18n國際化語言切換
近期業務需求，需要對原有專案進行國際化處理，該專案是基於vue2 vantui2.x的移動端h5spa專案。上網查閱了相關資料，大多推薦使用vue i18n國際化外掛程式來實現不同語言的切換。經過測試，已基本實現中文和英文兩種語言的切換。現在主流的前端ui框架也支援語言國際化，若專案中使用ui框架比...