标签：lang vue pro storage state ant TOGGLE import store
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。