國際化改造方案 === ``` 國際化改造大致分兩部分: （1）antd UI組件國際化 （2）業務文案的國際化需求 ``` ### 一、antd UI 組件國際化 文檔參見【[LocaleProvider 國際化](https://vue.ant.design/components/locale-provider-cn/)】 在項目App.vue頁面增加國際化代碼 ``` <template> <a-locale-provider :locale="zh_CN"> <App /> </a-locale-provider> </template> <script> import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { zh_CN, } } } </script> ``` 增加國際化設置功能切換locale國際化的類型值 ### 二、業務文案的國際化需求 #### (1) 安裝 vue-i18n： ``` $ npm install vue-i18n ``` #### (2) 在 src/components/lang/ 中創建語言js，例如 en-US.js 和 zh-CN.js 在 en-US.js 和 zh-CN.js 中分別作了如下配置： ``` // zh-CN.js export default { lang: '中文', } // en-US.js export default { lang: 'English', } ``` #### (3) 在main.js實例化組件 注意:Vue.use(VueI18n) 要放在實例化之前，不然會報錯 ``` import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注冊i18n實例并引入語言文件，文件格式等下解析 const i18n = new VueI18n({ locale: Vue.ls.get("language", "zh-CN")), messages: { 'zh-CN': require('@/components/lang/zh-CN.js'), 'en-US': require('@/components/lang/en-US.js') } }) //將i18n注入到vue實例中 new Vue({ el: '#app', router, store, i18n, components: { App }, template: '<App/>' }) ``` #### 在組件中這樣使用 ``` <template> <div> {{ $t('lang') }} </div> </template> ``` #### 如果想傳參，例如zh-CN.js中這樣配置： ``` welcome: "你好，{name}" ``` 頁面組件中這樣使用： ``` <template> <div> {{ $tc('welcome', {'name':'jeecg' }) }} </div> </template> ``` 頁面輸出 ： 你好，jeecg #### 常用方法： ``` $t(path, locale, option) // text 文本替換，locale可單獨設置語言，option可傳參數替換模板 $tc(path, choice, locale, option) // text+choice 比$t多一個choice，可以選擇模板內容（模板內容間用 | 分隔，如 香蕉|蘋果|梨，最多只能使用三個選項，下標從0開始，當選項為2個時下標從1開始~~） $te(path) // text+exist 判斷當前語言包中path是否存在 $d(number|Date, path, locale) // date 時間格式化 $n(number, path, locale) // number 數字格式化（貨幣等） // 更多細節參考官方文檔：https://kazupon.github.io/vue-i18n/api/#vue-injected-methods ``` 如果某些js中含有字符需要切換語言（包括rules），需要寫在computed中。 ``` computed: { rules1 () { return { username: [ {required: true, message: this.$t('username.required'), trigger: 'blur'} ] } } ??} ``` （3）國際化語言切換實現 ``` handleSetLanguage(lang) { this.$i18n.locale = lang; //改變當前語言 Vue.ls.set("language", lang);//將lang 語言存在localStorage里，main里面就會根據屬性值進行判斷 locale: Vue.ls.get("language", "zh-CN") }, ```