安装依赖
$ npm install vue-i18n
src下创建lang文件夹以及文件夹下zh.js,en.js和index.js文件
zh.js
export default {
message: ‘好好学习 天天向上‘
};
en.js
export default {
message: ‘Good good study,Day day up‘
};
index.js
import Vue from ‘vue‘;
import VueI18n from ‘vue-i18n‘;
import zh from ‘./zh‘;
import en from ‘./en‘;
Vue.use(VueI18n);
const messages = {
zh,
en
};
const i18n = new VueI18n({
locale: ‘‘, //设置当前所使用的语言 zh or en
messages
});
export default i18n;
main.js中导入/lang/index.js
import Vue from ‘vue‘;
import App from ‘./App.vue‘;
import router from ‘./router‘;
import store from ‘./store‘;
import i18n from ‘./lang‘;
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount(‘#app‘);
使用
$t(‘message‘)
$ vue add element-ui // 记得要引入i18n相关模块
import elementEnLocale from ‘element-ui/lib/locale/lang/en‘; // element-ui lang
import elementZhLocale from ‘element-ui/lib/locale/lang/zh-CN‘;// element-ui lang
//省略其他代码
const messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
};
//省略其他代码
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
});
vuex中添加对lang的设置
index.js
const state = {
language: ‘‘,
};
const getters = {
language: state => state.language,
}
const mutations = {
SET_LANGUAGE: (state, language) => {
state.language = language;
},
}
const actions = {
setLanguage({ commit }, language) {
commit(‘SET_LANGUAGE‘, language);
},
};
export default {
namespaced: true,
state,
mutations,
actions
};
lang/index.js中添加getLanguage()方法,处理messages中locale的值
export function getLanguage() {
//获取设置的language
const chooseLanguage = store.getters.language;
if (chooseLanguage) {
return chooseLanguage;
}
//如果没有设置language 读取本地的language
const language = (navigator.language || navigator.browserLanguage).toLowerCase();
const locales = Object.keys(messages);
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale;
}
}
return ‘en‘;
}
在vue中封装组件langSelect进行使用
<template>
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon class-name="international-icon" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language===‘zh‘" command="zh">
中文
</el-dropdown-item>
<el-dropdown-item :disabled="language===‘en‘" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
language() {
return this.$store.getters.language;
}
},
methods: {
handleSetLanguage(lang) {
this.$i18n.locale = lang;
this.$store.dispatch(‘setLanguage‘, lang);
}
}
};
</script>
原文:https://www.cnblogs.com/scorpiozone/p/14902835.html