其他分享
首页 > 其他分享> > ant design vue pro设置默认语言为中文

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