vue切换中英语言制作方法（Element+i18n的使用）

介绍： 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:falsethis.$i18n.locale=languagelocalStorage.setItem("wms-local",language)},},
}