前言
写一个中英文的切换demo
主要技术栈
vue-cli4 + element + elementui
插件引入
npm i element-ui --save
//引入i18n
npm i vue-i18n --savee
新建文件
src目录下新建一个lang文件夹，在lang文件下面新建三个文件分别是index.js, en_US.js, zh_CN.js
// en_US.js文件
export default {
routes: {
index: '简介'
},
layout: {
loginOut: 'loginOut',
successMessage: 'Congratulations on your success',
switchLanguage: 'switch language',
}
}
//zh_CN.js文件
export default {
routes: {
index: 'Intruduction'
},
layout: {
loginOut: '登出',
successMessage: '恭喜成功',
switchLanguage: '切换语言',
}
}
// index.js
import Vue from 'vue'
import VueI18n from "vue-i18n";
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import langZh from "./zh_CN.js"
import langEN from "./en_US.js"
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': {...langZh,...zhLocale},
'en': {...langEN,...enLocale}
}
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n
main.js配置
//main.js
import i18n from './lang'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale });
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
修改语言类型
switchLang(val){
this.$i18n.locale = val
}
组件内部使用 $t('')
<div>
<el-button @click="switchLang">{{$t('layout.switchLanguage')}}</el-button>
<div>{{$t('layout.successMessage')}}</div>
</div>
js内使用
this.$i18n.locale = 'zh'
