介绍： Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
1、安装Element ui
npm i element-ui -S
2、全局引用Element ui
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
3、安装vue-i8n
npm install vue-i18n
4、引入Vue-i18n，element处理语言
import VueI18n from 'vue-i18n';
//引入element处理语言
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 CN from "@/languages/Chinese"
import EN from "@/languages/English"
Vue.use(VueI18n)
const i18n=new VueI18n({
locale:localStorage.getItem("wms-local")||"zh",
messages:{
zh:{
...zhLocale,//elementui中文包
...CN
},
en:{
...enLocale,//elementui英文包
...EN
}
},
silentTranslationWarn: true
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
new Vue({
i18n,
store,
render: h => h(App)
}).$mount('#app')
完整代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//全局引用Element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入vueI18处理语言切换
import VueI18n from 'vue-i18n';
//引入element处理语言
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 CN from "@/languages/Chinese"
import EN from "@/languages/English"
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueI18n)
const i18n=new VueI18n({
locale:localStorage.getItem("wms-local")||"zh",
messages:{
zh:{
...zhLocale,//elementui中文包
...CN
},
en:{
...enLocale,//elementui英文包
...EN
}
},
silentTranslationWarn: true
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')
5、在项目中创建language文件夹
创建中文包（Chinese.js）
export default {
//常规
loading:"加载中",
quantity:"数量",
name:"名称",
all:"全部",
yes:"是",
no:"否",
delete:"删除",
edit:"编辑",
confirm:"确认",
print:"打印",
Check_the_details:"查看",
successful_operation:"操作成功!",
The_query_is_successful:"查询成功",
operation_failed:"操作失败！",
more:"更多",
//登录
Chinese:"中文",
English:"English",
WMS_system:"WMS系统",
UserAccount:"用户账号",
password:"密码",
RememberPassword:"记住密码",
ForgotPassword:"忘记密码",
RegisterAccount:"注册账号",
login:"登录",
Please_enter_a_user_account:"未输入用户账号",
Please_enter_the_user_password:"未输入密码",
SignIn:"登录中",
LoginSuccessful:"登录成功",
}
英文包（English.js）
export default {
//登录
Chinese:"Ch",
English:"En",
Overseas_warehouse_system:"Overseas warehouse system",
UserAccount:"User account",
password:"password",
RememberPassword:"Remember the password",
ForgotPassword:"Forgot password",
RegisterAccount:"Register an account",
login:"login",
Please_enter_a_user_account:"The user account number was not entered",
Please_enter_the_user_password:"The password was not entered",
SignIn:"Sign in",
LoginSuccessful:"Login successful",
}
6、在组件中使用
<div class="AllWidth LoginLang">
<span :class="{'weight':isChinese}" @click="toggleLanguage('zh')">{
{
$t('Chinese')}}</span>
<span style="margin:0 5px 0 5px">|</span>
<span :class="{'weight':!isChinese}" @click="toggleLanguage('en')" style="font-size:16px">{
{
$t('English')}}</span>
</div>
export default {
data(){
return{
isChinese:true, //控制语言切换
}
},
watch:{
"$i18n.locale"(){
this.loginText=this.$t('login')
}
},
methods:{
toggleLanguage(language){
//切换语言
this.isChinese=language=='ZN'?true:false
this.$i18n.locale=language
localStorage.setItem("wms-local",language)
},
},
}