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

Posted 2023-01-04

介绍： 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)
   ,
 ,