(资料图)

介绍： 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 uiimport 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 = falseVue.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、在组件中使用

  {{$t("Chinese")}}  |  {{$t("English")}}
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)   }, },}