前端项目国际化-(vue-i18n)

一、前端国际化支持

1、VUE安装 i18n 依赖

npm install vue-i18n --save

2、src目录下新建lang文件夹，新建i18n.js、language.en_US.js、language.zh_CN.js三个文件

i18n.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 './language.en_US'
import zhLocale from './language.zh_CN'

Vue.use(VueI18n)

const messages = {
  en_US: {
    ...enLocale,
    ...elementEnLocale
  },
  zh_CN: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // 设置语言 选项 en_US | zh_CN
  locale: Cookies.get('language') || 'zh_CN', // 通过this.$i18n.locale的值实现语言切换
  // 设置文本内容
  messages
})

export default i18n

language.en_US.js文件示例

export default {
  login: {
    title: 'Device Cloud Management System',
    logIn: 'Log in',
    username: 'Username',
    password: 'Password'
  },
  //消息提示
  message:{
    setLanguageSuccess:"Set language success"
  },
  //菜单相关
  menus:{
    deviceManage:"Device Manage"
  }
}

language

export default {
  login: {
    title: '设备云管理系统',
    logIn: '登录',
    username: '账号',
    password: '密码'
  },
  //消息提示
  message:{
    setLanguageSuccess:"设置语言成功"
  },
  //菜单相关
  menus:{
    deviceManage:"设备管理"
  }
}

3、在src/main.js文件中添加i18n

import i18n from "./lang/i18n";

// use添加i18n
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

4、在src/store/getter.js添加language

const getters = {
  language: state => state.app.language,
}
export default getters

5、在src/store/modules/app.js中添加state-language

import Cookies from 'js-cookie'

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

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

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

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

6、在src/api下新建language.js文件，changeLanguages方法用于访问后端接口，修改语言

import request from '@/utils/request'

/**
 * * 获取信息
 * @param address
 * @returns {AxiosPromise}
 */
export function changeLanguages(lang){
  return request({
    url: '/changeLanguages',
    method: 'get',
    headers: {
      isToken: false,
    },
    params: {
      lang: lang
    }
  })
}

7、在src/components/LangSelect/index.vue中创建语言切换组件，以下拉框为例

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en_US'" command="en_US">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import {changeLanguages} from "../../api/system/language";
import Cookies from "js-cookie";
export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)
      //请求后端，后端切换语言
      changeLanguages(lang).then(response => {
        console.info("change-language:" + lang);
        window.location.reload();
        this.$message({
          message: this.$t("message.setLanguageSuccess"),
          type: 'success'
        })
      });
    }
  }
}
</script>

8、前端使用方式

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

9、常见异常报错处理

in ./node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js "export ‘Fragment’ was not found in ‘vue’

问题原因：i18n插件版本过高，与当前vue版本不兼容

解决方式：安装低版本i18n