多语言

src/i18n/i18n.js

@@ -3,15 +3,17 @@ import Vue from 'vue'
 
 
 Vue.use(VueI18n)
-var locale;
-localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'cn';
+const supportedLocales = ['cn', 'en']
+let locale = localStorage.getItem('locale') || 'cn'
+if (!supportedLocales.includes(locale)) {
+  locale = 'cn'
+  localStorage.setItem('locale', locale)
+}
 const i18n = new VueI18n({
   locale: locale,    // 语言标识
   messages: {
     'cn': require('./locales/cn'),   // 中文语言包
-    'en': require('./locales/en'),   // 英文语言包
-    'jp': require('./locales/jp'),   // 日文语言包
-    'kr': require('./locales/kr')    // 韩文语言包
+    'en': require('./locales/en')   // 英文语言包
   },
 })
 

src/utils/ajax.js

@@ -2,6 +2,12 @@ import Vue from "vue";
 import axios from 'axios';
 const qs = require('qs');
 var apiServer =  (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
+
+const resolveAcceptLanguage = () => {
+  const locale = localStorage.getItem('locale') || 'cn';
+  return locale === 'en' ? 'en-US' : 'zh-CN';
+};
+
 var http = axios.create({
   timeout: 10000,
   headers: {},
@@ -19,7 +25,8 @@ export default {
     const config = {
       headers: {
         'Content-Type': 'application/json;charset=UTF-8',
-        'token': Vue.cookie.get('token')
+        'token': Vue.cookie.get('token'),
+        'Accept-Language': resolveAcceptLanguage()
       }
     };
     let p = http.post(apiServer +url, JSON.stringify(data), config);
@@ -44,6 +51,7 @@ export default {
       xhr.setRequestHeader("X-API", "true");
       xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
       xhr.setRequestHeader("token", Vue.cookie.get('token') );
+      xhr.setRequestHeader("Accept-Language", resolveAcceptLanguage());
       xhr.onreadystatechange = function (e) {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {

src/utils/httpRequest.js

@@ -5,6 +5,11 @@ import qs from 'qs'
 import merge from 'lodash/merge'
 import {clearLoginInfo} from '@/utils'
 
+const resolveAcceptLanguage = () => {
+  const locale = localStorage.getItem('locale') || 'cn'
+  return locale === 'en' ? 'en-US' : 'zh-CN'
+}
+
 // axios.defaults.withCredentials = false
 const http = axios.create({
   timeout: 1000 * 300,
@@ -20,6 +25,7 @@ const http = axios.create({
  */
 http.interceptors.request.use(config => {
   config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
+  config.headers['Accept-Language'] = resolveAcceptLanguage()
   return config
 }, error => {
   return Promise.reject(error)
@@ -93,6 +99,7 @@ const instance = axios.create({
  */
 instance.interceptors.request.use(config => {
   config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
+  config.headers['Accept-Language'] = resolveAcceptLanguage()
   return config
 }, error => {
   return Promise.reject(error)
@@ -128,6 +135,7 @@ const instance2 = axios.create({
  */
 instance2.interceptors.request.use(config => {
   config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
+  config.headers['Accept-Language'] = resolveAcceptLanguage()
   return config
 }, error => {
   return Promise.reject(error)

src/views/main-navbar-update-language.vue

@@ -63,7 +63,8 @@
       // 获取多语言列表
       getLanguageList() {
         searchSysLanguage({ languageCode: this.$i18n.locale}).then(({data}) => {
-          this.languageList = data.rows
+          const allowSet = new Set(['cn', 'en', 'zh-CN', 'en-US'])
+          this.languageList = (data.rows || []).filter(item => allowSet.has(item.languageCode))
         })
       },
       // 初始化