vue+elementUI+vue-i18n實現中英文切換。
阿新 • • 發佈:2018-11-02
安裝: npm install vue-i18n
vue.js+vue-i18n國際化
在main.js同級建i18n資料夾,並裡面建i18n.js、langs資料夾,langs資料夾下建en.js、cn.js
目錄如下:
. ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── i18n │ ├── i18n.js │ └── langs │ ├── cn.js │ ├── en.js │ └── index.js ├── main.js └── store.js
//i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.lang || 'cn',
messages
})
export default i18n
//langs/index.js import en from './en' import cn from './cn' export default { en, cn }
//en.js
const en = {
message: {
'hello': 'hello, world',
}
}
export default en
//cn.js
const cn = {
message: {
'hello': '你好,世界',
}
}
export default cn
//main.js import Vue from 'vue' import App from './App' import store from './store' import i18n from './i18n/i18n' Vue.config.productionTip = false window.app = new Vue({ store, i18n, render: h => h(App) }).$mount('#app')
接下來是在頁面中使用、切換語言。
//html:
<p>{{$t('message.hello')}}</p> // hello, world
//js切換語言
data() {
return {
lang: 'en'
}
},
methods: {
switchLang() {
this.$i18n.locale = this.lang
}
}
通過改變this.$i18n.locale的值就可以自動切換頁面的語言了
vue.js+vue-i18n+elementUI國際化
接下來是將elementUI國際化,更改的地方不多,程式碼如下
//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.lang || 'cn',
messages
})
locale.i18n((key, value) => i18n.t(key, value)) //重點:為了實現element外掛的多語言切換
export default i18n
//en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
message: {
'hello': 'hello, world',
},
...enLocale
}
export default en
//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
message: {
'hello': '你好,世界',
},
...zhLocale
}
export default cn
main.js保持不變,現在切換中英文,elementUI內部語言也會改變。