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:false
     this.$i18n.locale=language
     localStorage.setItem("wms-local",language)
   },
 },
}