1. 修改src/core/bootstrap.js第29行
import store from '@/store'
import storage from 'store'
import {
ACCESS_TOKEN,
APP_LANGUAGE,
TOGGLE_CONTENT_WIDTH,
TOGGLE_FIXED_HEADER,
TOGGLE_FIXED_SIDEBAR, TOGGLE_HIDE_HEADER,
TOGGLE_LAYOUT, TOGGLE_NAV_THEME, TOGGLE_WEAK,
TOGGLE_COLOR, TOGGLE_MULTI_TAB
} from '@/store/mutation-types'
import { printANSI } from '@/utils/screenLog'
import defaultSettings from '@/config/defaultSettings'
export default function Initializer () {
printANSI() // 请自行移除该行. please remove this line
store.commit(TOGGLE_LAYOUT, storage.get(TOGGLE_LAYOUT, defaultSettings.layout))
store.commit(TOGGLE_FIXED_HEADER, storage.get(TOGGLE_FIXED_HEADER, defaultSettings.fixedHeader))
store.commit(TOGGLE_FIXED_SIDEBAR, storage.get(TOGGLE_FIXED_SIDEBAR, defaultSettings.fixSiderbar))
store.commit(TOGGLE_CONTENT_WIDTH, storage.get(TOGGLE_CONTENT_WIDTH, defaultSettings.contentWidth))
store.commit(TOGGLE_HIDE_HEADER, storage.get(TOGGLE_HIDE_HEADER, defaultSettings.autoHideHeader))
store.commit(TOGGLE_NAV_THEME, storage.get(TOGGLE_NAV_THEME, defaultSettings.navTheme))
store.commit(TOGGLE_WEAK, storage.get(TOGGLE_WEAK, defaultSettings.colorWeak))
store.commit(TOGGLE_COLOR, storage.get(TOGGLE_COLOR, defaultSettings.primaryColor))
store.commit(TOGGLE_MULTI_TAB, storage.get(TOGGLE_MULTI_TAB, defaultSettings.multiTab))
store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))
store.dispatch('setLang', storage.get(APP_LANGUAGE, 'zh-CN'))
// last step
}
2.修改src/locales/index.js第7、11、14行
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import storage from 'store'
import moment from 'moment'
// default lang
import enUS from './lang/zh-CN'
Vue.use(VueI18n)
export const defaultLang = 'zh-CN'
const messages = {
'zh-CN': {
...enUS
}
}
const i18n = new VueI18n({
silentTranslationWarn: true,
locale: defaultLang,
fallbackLocale: defaultLang,
messages
})
const loadedLanguages = [defaultLang]
function setI18nLanguage (lang) {
i18n.locale = lang
// request.headers['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguageAsync (lang = defaultLang) {
return new Promise(resolve => {
// 缓存语言设置
storage.set('lang', lang)
if (i18n.locale !== lang) {
if (!loadedLanguages.includes(lang)) {
return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
const locale = msg.default
i18n.setLocaleMessage(lang, locale)
loadedLanguages.push(lang)
moment.updateLocale(locale.momentName, locale.momentLocale)
return setI18nLanguage(lang)
})
}
return resolve(setI18nLanguage(lang))
}
return resolve(lang)
})
}
export function i18nRender (key) {
return i18n.t(`${key}`)
}
export default i18n
3.修改src/modules/app.js第32行
import storage from 'store'
import {
SIDEBAR_TYPE,
TOGGLE_MOBILE_TYPE,
TOGGLE_NAV_THEME,
TOGGLE_LAYOUT,
TOGGLE_FIXED_HEADER,
TOGGLE_FIXED_SIDEBAR,
TOGGLE_CONTENT_WIDTH,
TOGGLE_HIDE_HEADER,
TOGGLE_COLOR,
TOGGLE_WEAK,
TOGGLE_MULTI_TAB,
// i18n
APP_LANGUAGE
} from '@/store/mutation-types'
import { loadLanguageAsync } from '@/locales'
const app = {
state: {
sideCollapsed: false,
isMobile: false,
theme: 'dark',
layout: '',
contentWidth: '',
fixedHeader: false,
fixedSidebar: false,
autoHideHeader: false,
color: '',
weak: false,
multiTab: true,
lang: 'zh-CN',
_antLocale: {}
},
mutations: {
[SIDEBAR_TYPE]: (state, type) => {
state.sideCollapsed = type
storage.set(SIDEBAR_TYPE, type)
},
[TOGGLE_MOBILE_TYPE]: (state, isMobile) => {
state.isMobile = isMobile
},
[TOGGLE_NAV_THEME]: (state, theme) => {
state.theme = theme
storage.set(TOGGLE_NAV_THEME, theme)
},
[TOGGLE_LAYOUT]: (state, mode) => {
state.layout = mode
storage.set(TOGGLE_LAYOUT, mode)
},
[TOGGLE_FIXED_HEADER]: (state, mode) => {
state.fixedHeader = mode
storage.set(TOGGLE_FIXED_HEADER, mode)
},
[TOGGLE_FIXED_SIDEBAR]: (state, mode) => {
state.fixedSidebar = mode
storage.set(TOGGLE_FIXED_SIDEBAR, mode)
},
[TOGGLE_CONTENT_WIDTH]: (state, type) => {
state.contentWidth = type
storage.set(TOGGLE_CONTENT_WIDTH, type)
},
[TOGGLE_HIDE_HEADER]: (state, type) => {
state.autoHideHeader = type
storage.set(TOGGLE_HIDE_HEADER, type)
},
[TOGGLE_COLOR]: (state, color) => {
state.color = color
storage.set(TOGGLE_COLOR, color)
},
[TOGGLE_WEAK]: (state, mode) => {
state.weak = mode
storage.set(TOGGLE_WEAK, mode)
},
[APP_LANGUAGE]: (state, lang, antd = {}) => {
state.lang = lang
state._antLocale = antd
storage.set(APP_LANGUAGE, lang)
},
[TOGGLE_MULTI_TAB]: (state, bool) => {
storage.set(TOGGLE_MULTI_TAB, bool)
state.multiTab = bool
}
},
actions: {
setLang ({ commit }, lang) {
return new Promise((resolve, reject) => {
commit(APP_LANGUAGE, lang)
loadLanguageAsync(lang).then(() => {
resolve()
}).catch((e) => {
reject(e)
})
})
}
}
}
export default app
4.清除浏览器storage中lang刷新