前端支持国际化流程 vue

实现前端国际化

在开发管理系统过程中，突然遇到一个需求，就是支持页面国际化，支持中英文语言切换，所以记录一下开发的过程。

国际化开发流程

这里我采用的是i18n来进行国际化下面是国际化的步骤：

1. 下载vue-i18n插件，这里笔者在下载的时候下载失败了，看了一下报错信息是因为版本的问题
   在vue2环境下，默认安装 npm install vue-i18n 的版本是 [email protected]，所以报错信息如下：

 PS D:\myFile\dev\YSJ-dev\cbj-mall-manage> npm i vue-i18n -save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"2.6.10" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from [email protected]
npm ERR! node_modules/vue-i18n
npm ERR!   vue-i18n@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! peer vue@"^3.0.0" from [email protected]  （意思是版本不匹配）
npm view vue-i18n versions --json 命令查看所有的版本

2. 当然也可以在package.json中dependencies节点添加vue-i18n，之后重新下载依赖

"vue-i18n": "7.3.2",

3. src目录下创建lang目录，存放国际化文件此处包含三个文件，分别是 index.js zh.js en.js

// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // 设置语言 选项 en | zh
  locale: Cookies.get('language') || 'en',
  // 设置文本内容
  messages
})

export default i18n

// zh.js
export default {
  login: {
    title: '若依后台管理系统',
    logIn: '登录',
    username: '账号',
    password: '密码'
  },
  tagsView: {
    refresh: '刷新',
    close: '关闭',
    closeOthers: '关闭其它',
    closeAll: '关闭所有'
  },
  settings: {
    title: '系统布局配置',
    theme: '主题色',
    tagsView: '开启 Tags-View',
    fixedHeader: '固定 Header',
    sidebarLogo: '侧边栏 Logo'
  }
}

// en.js
export default {
  login: {
    title: 'RuoYi Login Form',
    logIn: 'Log in',
    username: 'Username',
    password: 'Password'
  },
  tagsView: {
    refresh: 'Refresh',
    close: 'Close',
    closeOthers: 'Close Others',
    closeAll: 'Close All'
  },
  settings: {
    title: 'Page style setting',
    theme: 'Theme Color',
    tagsView: 'Open Tags-View',
    fixedHeader: 'Fixed Header',
    sidebarLogo: 'Sidebar Logo'
  }
}

4. 在src/main.js中增量添加i18n

import i18n from './lang'

// use添加i18n
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  i18n,
})

5. 在src/store/getters.js中添加language

language: state => state.app.language,

6. 在src/store/modules/app.js中增量添加i18n

const state = {
  language: Cookies.get('language') || 'en'
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

7. 在src/components/LangSelect/index.vue中创建汉化组件

8. 在页面中使用方法
   在zh.js和en.js中填写你要国际化的东西，要一一对应，然后就可以用下面的方法使用了

普通文本使用方式： {{ $t('login.title') }}
标签内使用方式：   :placeholder="$t('login.password')"
js内使用方式       this.$t('login.user.password.not.match')