(資料圖)

介紹： 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"http://全局引用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)   }, },}