ant design vue pro设置默认语言为中文
作者：互联网
ant design vue pro设置默认语言为中文
1. 修改src/core/bootstrap.js第29行改成30行
1 import store from '@/store'
2 import storage from 'store'
3 import {
4 ACCESS_TOKEN,
5 APP_LANGUAGE,
6 TOGGLE_CONTENT_WIDTH,
7 TOGGLE_FIXED_HEADER,
8 TOGGLE_FIXED_SIDEBAR, TOGGLE_HIDE_HEADER,
9 TOGGLE_LAYOUT, TOGGLE_NAV_THEME, TOGGLE_WEAK,
10 TOGGLE_COLOR, TOGGLE_MULTI_TAB
11 } from '@/store/mutation-types'
12 import { printANSI } from '@/utils/screenLog'
13 import defaultSettings from '@/config/defaultSettings'
14
15 export default function Initializer () {
16 printANSI() // 请自行移除该行. please remove this line
17
18 store.commit(TOGGLE_LAYOUT, storage.get(TOGGLE_LAYOUT, defaultSettings.layout))
19 store.commit(TOGGLE_FIXED_HEADER, storage.get(TOGGLE_FIXED_HEADER, defaultSettings.fixedHeader))
20 store.commit(TOGGLE_FIXED_SIDEBAR, storage.get(TOGGLE_FIXED_SIDEBAR, defaultSettings.fixSiderbar))
21 store.commit(TOGGLE_CONTENT_WIDTH, storage.get(TOGGLE_CONTENT_WIDTH, defaultSettings.contentWidth))
22 store.commit(TOGGLE_HIDE_HEADER, storage.get(TOGGLE_HIDE_HEADER, defaultSettings.autoHideHeader))
23 store.commit(TOGGLE_NAV_THEME, storage.get(TOGGLE_NAV_THEME, defaultSettings.navTheme))
24 store.commit(TOGGLE_WEAK, storage.get(TOGGLE_WEAK, defaultSettings.colorWeak))
25 store.commit(TOGGLE_COLOR, storage.get(TOGGLE_COLOR, defaultSettings.primaryColor))
26 store.commit(TOGGLE_MULTI_TAB, storage.get(TOGGLE_MULTI_TAB, defaultSettings.multiTab))
27 store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))
28
29 // store.dispatch('setLang', storage.get(APP_LANGUAGE, 'en-US'))
30 store.dispatch('setLang', storage.get(APP_LANGUAGE, 'zh-CN'))
31 // last step
32 }
2.修改src/locales/index.js第7行改成8、12行改成13、16行改成23
1 import Vue from 'vue'
2 import VueI18n from 'vue-i18n'
3 import storage from 'store'
4 import moment from 'moment'
5
6 // default lang
7 // import enUS from './lang/en-US'
8 import enUS from './lang/zh-CN'
9
10 Vue.use(VueI18n)
11
12 // export const defaultLang = 'en-US'
13 export const defaultLang = 'zh-CN'
14
15 // const messages = {
16 // 'en-US': {
17 // ...enUS
18 // }
19 // }
20
21
22 const messages = {
23 'zh-CN': {
24 ...enUS
25 }
26 }
27
28 const i18n = new VueI18n({
29 silentTranslationWarn: true,
30 locale: defaultLang,
31 fallbackLocale: defaultLang,
32 messages
33 })
34
35 const loadedLanguages = [defaultLang]
36
37 function setI18nLanguage (lang) {
38 i18n.locale = lang
39 // request.headers['Accept-Language'] = lang
40 document.querySelector('html').setAttribute('lang', lang)
41 return lang
42 }
43
44 export function loadLanguageAsync (lang = defaultLang) {
45 return new Promise(resolve => {
46 // 缓存语言设置
47 storage.set('lang', lang)
48 if (i18n.locale !== lang) {
49 if (!loadedLanguages.includes(lang)) {
50 return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
51 const locale = msg.default
52 i18n.setLocaleMessage(lang, locale)
53 loadedLanguages.push(lang)
54 moment.updateLocale(locale.momentName, locale.momentLocale)
55 return setI18nLanguage(lang)
56 })
57 }
58 return resolve(setI18nLanguage(lang))
59 }
60 return resolve(lang)
61 })
62 }
63
64 export function i18nRender (key) {
65 return i18n.t(`${key}`)
66 }
67
68 export default i18n
3.修改src/store/modules/app.js第32行改成33行
1 import storage from 'store'
2 import {
3 SIDEBAR_TYPE,
4 TOGGLE_MOBILE_TYPE,
5 TOGGLE_NAV_THEME,
6 TOGGLE_LAYOUT,
7 TOGGLE_FIXED_HEADER,
8 TOGGLE_FIXED_SIDEBAR,
9 TOGGLE_CONTENT_WIDTH,
10 TOGGLE_HIDE_HEADER,
11 TOGGLE_COLOR,
12 TOGGLE_WEAK,
13 TOGGLE_MULTI_TAB,
14 // i18n
15 APP_LANGUAGE
16 } from '@/store/mutation-types'
17 import { loadLanguageAsync } from '@/locales'
18
19 const app = {
20 state: {
21 sideCollapsed: false,
22 isMobile: false,
23 theme: 'dark',
24 layout: '',
25 contentWidth: '',
26 fixedHeader: false,
27 fixedSidebar: false,
28 autoHideHeader: false,
29 color: '',
30 weak: false,
31 multiTab: true,
32 // lang: 'en-US',
33 lang: 'zh-CN',
34 _antLocale: {}
35 },
36 mutations: {
37 [SIDEBAR_TYPE]: (state, type) => {
38 state.sideCollapsed = type
39 storage.set(SIDEBAR_TYPE, type)
40 },
41 [TOGGLE_MOBILE_TYPE]: (state, isMobile) => {
42 state.isMobile = isMobile
43 },
44 [TOGGLE_NAV_THEME]: (state, theme) => {
45 state.theme = theme
46 storage.set(TOGGLE_NAV_THEME, theme)
47 },
48 [TOGGLE_LAYOUT]: (state, mode) => {
49 state.layout = mode
50 storage.set(TOGGLE_LAYOUT, mode)
51 },
52 [TOGGLE_FIXED_HEADER]: (state, mode) => {
53 state.fixedHeader = mode
54 storage.set(TOGGLE_FIXED_HEADER, mode)
55 },
56 [TOGGLE_FIXED_SIDEBAR]: (state, mode) => {
57 state.fixedSidebar = mode
58 storage.set(TOGGLE_FIXED_SIDEBAR, mode)
59 },
60 [TOGGLE_CONTENT_WIDTH]: (state, type) => {
61 state.contentWidth = type
62 storage.set(TOGGLE_CONTENT_WIDTH, type)
63 },
64 [TOGGLE_HIDE_HEADER]: (state, type) => {
65 state.autoHideHeader = type
66 storage.set(TOGGLE_HIDE_HEADER, type)
67 },
68 [TOGGLE_COLOR]: (state, color) => {
69 state.color = color
70 storage.set(TOGGLE_COLOR, color)
71 },
72 [TOGGLE_WEAK]: (state, mode) => {
73 state.weak = mode
74 storage.set(TOGGLE_WEAK, mode)
75 },
76 [APP_LANGUAGE]: (state, lang, antd = {}) => {
77 state.lang = lang
78 state._antLocale = antd
79 storage.set(APP_LANGUAGE, lang)
80 },
81 [TOGGLE_MULTI_TAB]: (state, bool) => {
82 storage.set(TOGGLE_MULTI_TAB, bool)
83 state.multiTab = bool
84 }
85 },
86 actions: {
87 setLang ({ commit }, lang) {
88 return new Promise((resolve, reject) => {
89 commit(APP_LANGUAGE, lang)
90 loadLanguageAsync(lang).then(() => {
91 resolve()
92 }).catch((e) => {
93 reject(e)
94 })
95 })
96 }
97 }
98 }
99
100 export default app
4.因为该框架语言存在了本地，所以只要清楚本地即可
清除本地：
重新登录即可。
转载：https://blog.csdn.net/qq2942713658/article/details/118782281
标签：lang,vue,pro,storage,state,ant,TOGGLE,import,store 来源： https://www.cnblogs.com/wg-blog/p/15714317.html