Vue国际化解决方案

前言✨

在公司茫茫的业务海洋中我们可能会遇到各种要求，比如国际化的建设，通俗的来说就是多语言切换，以下是我的解决方案已在线上使用半年之久。

技术栈：Vue2.x

UI：element

npm：www.npmjs.com/package/vue…

安装、配置⚙

1.首先安装依赖

$ npm i vue-i18n 
or
$ yarn add vue-i18n

2.建立目录和文件，src下建立i18n目录，再建立lang目录，如下（ps:建立目录这个没有什么强制规则，但是为了后期维护和逼格建议还是走点心。）

目录介绍：module代表模块，这个根据项目来定，如果项目很大且多人同时开发，如果不区分模块很容易代码冲突且后期维护困难。注意，模块里面的文件命名必须是一样的，如下！！！

3.以上基础目录建立好后，配置需要转化的语言变量。下面以中文和英语为例，变量名也必须一一对应。

// 文件路径 src/i18n/lang/zh-CN/module/login.js
export default {
    login: {
        login: '登录',
        rememberId: '记住账号和密码',
        loginByPhone: '手机快捷登录',
        loginByPassword: '账号密码登录',
        phoneNumPlaceholder: '请输入手机号',
        passwordPlaceholder: '请输入密码'
    }
}
// 文件路径 src/i18n/lang/en-US/module/login.js
export default {
    login: {
        login: 'Sign In', //登录，
        rememberId: 'Remember Me', //记住账号和密码
        loginByPhone: 'Quick Sign In', //手机快捷登录
        loginByPassword: 'Account Sign In', //账号密码登录
        phoneNumPlaceholder: 'Enter Cell Phone No.', //请输入手机号
        passwordPlaceholder: 'Enter Password' //请输入密码
    }
}

module文件统一导出index.js，这样做的好处是把不同语言的很多模块都用一个文件导出方便管理。

// 英文文件路径 src/i18n/lang/en-US/index.js  
// 中文文件路径 src/i18n/lang/zh-CN/index.js
import Login from './module/login'
export default {
  ...Login
};

4.语言选择配置文件，可以理解为config文件，element自带了国际化配置变量，所以这里只需要引入对应的文件即可。

// 文件路径 i18n/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element英语
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element中文
import enLocale from './en-US/index'
import zhLocale from './zh-CN/index'
Vue.use(VueI18n)

const messages = {
  // 简体中文
  'zh-CN': {
    ...zhLocale,
    ...elementZhLocale
  },
  // 英语
  'en-US': {
    ...enLocale,
    ...elementEnLocale
  }
}
// 获取当前语言 默认中文
export function getLanguage() {
  const currentLang = JSON.parse(localStorage.getItem('currentLangInfo'))
  if (currentLang && currentLang.value) {
    return currentLang.value
  }
  return 'zh-CN'
}
const i18n = new VueI18n({
  locale: getLanguage(),
  messages
})

export default i18n

5.main.js入口文件引入

// 文件路径 src/main.js
import Vue from 'vue'
import App from './App'
import store from './store'
import i18n from './i18n/lang/index' // 引入第4步的配置文件
Vue.use(ElementUI, {
  // elementUI 语言配置
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  store,
  components: {
    App
  },
  i18n,// 初始化实例
  template: '<App/>'
})

6.建立修改语言下拉框并结合vuex

// 文件路径 src/store/lang/index.js  vuex

// 默认语言
const defaultLang = {
  label: "简体中文",
  value: "zh-CN",
}
const state = {
  currentLangInfo: JSON.parse(localStorage.getItem('currentLangInfo')) || defaultLang
}
const mutations = {
  setLangInfo(state, payload) {
    state.currentLangInfo = payload;
    localStorage.setItem('currentLangInfo', JSON.stringify(payload));
  },
}

export default {
  namespaces: true,
  state,
  mutations
}

// 下拉框切换
<template>
    <el-dropdown
    @command="selectLang"
    trigger="click"
    >
        <span class="login-one">
        {{ $store.state.Lang.currentLangInfo.label}}
        <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in langList"
          :key="index"
          :command="item"
          >{{ item.label }}</el-dropdown-item
        >
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>
export default {
    data() {
        return {
            langList:[
                {
                  label: "简体中文",
                  value: "zh-CN",
                },
                {
                  label: "English",
                  value: "en-US",
                }
             ]
        }
    },
    methods: {
         // 选择语言
        selectLang(item) {
          this.$store.commit("setLangInfo", item);
          this.$i18n.locale = item.value;
        },
    }
}
</script>

最终效果如下

使用方法💻

固定写法$t(变量名)

// 文件路径 src/page/login.vue 登录页
   <div>
      {{ $t("login.login") }}
   </div>
    <div>
      {{ $t("login.rememberId") }}
   </div>