Vue+Springboot打造前后端分离的企业管理系统 — Vue前端国际化支持详解

系统前端Vue的国际化应用vue-i18n插件支持，按照vue-i18n插件的使用规范即可实现界面的多语言支持，非常简单。具体应用步骤如下：
一、安装插件
npm install vue-i18n --save

二、在项目src下新建一个i18n目录，创建index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { getObjArr } from '@/utils/storage'

// 启用i18n
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: getObjArr('locale') || 'zh_CN', // 默认为中文
  messages: {
    'zh_CN': require('@/assets/messages/messages_zh_CN.js'),
    'en_US': require('@/assets/messages/messages_en_US.json')
  }
})

export default i18n

三、在main.js中引入插件

1.引入i18n国际化插件。

import i18n from './i18n'

2.将i18n注入到vue实例中

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

四、文本Messages文件格式（js文件）

在项目的assets目录下新建一个messages目录，后面所有前端页面的多语言消息文本将统一保存在此目录下，如果喜欢，使用json文件格式保存message本文也是可以的。messages的js文件示例如下。

简体中文（messages_zh_CN.js）：

对应的messages_en_US.js格式与messages_zh_CN.js一样，只需要把中文改为英文即可，如下：

五、在axios设置请求头，将语言环境与后台同步

前端的语言环境需要与后台同步才能保持前后台统一系统语境，通过在axios中的拦截中注入语言变量的传递。

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import { getObjArr } from '@/utils/storage'

const QS = re