前端国际化语言

一、完整引入国际化

npm install vue-i18n

二、准备好,要切换的国际语言包

中英文语言包变化

三、在main,js中引入vue-i8语言包,进行和elementui国际化进行合并

import VueI18n from "vue-i18n"
//引入element处理语言
import ElementLocale from "element-ui/lib/locale"

四、实例化VueI18n,进行语言包绑定

1. 在src下来新建一个language文件夹,在当前文件夹下面新建index.js,进行实例化代码

// 完成多语言的实例化
import Vue from "vue"
import Cookies from "js-cookie"
import VueI18n from "vue-i18n"
//引入element处理语言
import enLocale from "element-ui/lib/locale/lang/en"
import zhLocale from "element-ui/lib/locale/lang/zh-CN"
// 我们准备好的语言包
import CN from "./zh"
import EN from "./en"
​
Vue.use(VueI18n)
// 实例化
export default new VueI18n({
  // 默认展示是的语言
  locale: Cookies.get("language") || "zh",
  // 消息主体
  messages: {
    zh: {
      ...zhLocale, //elementui中文包
      ...CN
    },
    en: {
      ...enLocale, //elementui英文包
      ...EN
    }
  },
  silentTranslationWarn: true
})
​

国际语言注册需要全局引入,所以要进行全局注册,

准备一个全局方法,进行调用切换

五、将实例化后的vuei8全局引入到main.js中,并且绑定方法,设置公共方法,进行循环

在main.js中引入实例化后vue-i8

// 引入我们实例化后vue-i18
import i18n from "./language/index"
//将我们实例化的vue-i8编写公共方法,绑定要elementui语言上
ElementLocale.i18n((key, value) => i18n.t(key, value))
// 把i18注册到Vue实例上
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App)
}).$mount("#app")
​

六、使用方法

在页面始终
$t('')

七、编写中英文下拉组件

1. 在src/components 文件夹下新建,lang文件夹,在lang文件夹下新建index.vue

   <template>
     <el-dropdown trigger="click" @command="changeLanguage">
       <!-- 这里必须加一个div -->
       <div>
         <svg-icon style="color: #fff; font-size: 20px" icon-class="language" />
       </div>
       <el-dropdown-menu slot="dropdown">
     <!-- 这块需要注意,两个command需要配合我们实例化i18的时候去使用 -->   
         <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">中文</el-dropdown-item>
         <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">en</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </template>
   ​
   <script>
   import Cookie from "js-cookie"
   export default {
     methods: {
       changeLanguage(lang) {
         Cookie.set("language", lang) // 切换多语言
         this.$i18n.locale = lang // 设置给本地的i18n插件
         this.$message.success("切换多语言成功")
       }
     }
   }
   </script>
   ​