环境（iview UI也要适配国际化)

由于项目要求系统支持国际化，故需要在原来的项目中添加vue-i18n包（之前用了vuex-i18n, 但是不知道怎么样去动态改变iview的国际化，如果有大佬知道恳请告知)。

配置国际化

在package.json添加vue-i18n "vue-i18n": "^8.11.2"

在main.js中配置国际化

1. 创建本地 zh.js 以及 en.js en.js LOCATION_ERROR: Location Error QUANTITY_ERROR: Quantity Error REPEAT_QR_CODE: Repeat QR Code SCAN_HISTORY: Scan History zh.js LOCATION_ERROR: 地址错误 QUANTITY_ERROR: 数量错误 REPEAT_QR_CODE: 重复扫码 SCAN_HISTORY: 扫码历史
2. 导入iview和i18n以及两个本地中英文js文件和iview自带的语言js import zh from @/locales/lang/zh.js //注意路径改成你创建的路径 import en from @/locales/lang/en.js //注意路径改成你创建的路径 import ien from iview/dist/locale/en-US import izh from iview/dist/locale/zh-CN
3. 配置i18n Vue.use(VueI18n) Vue.locale = () => {} const messages = { en-US: Object.assign(zh, izh), zh-CN: Object.assign(en, ien) } const i18n = new VueI18n({ locale: localStorage.getItem("locale") } || zh-CN, // 从localStorage中获取，如果没有则设置中文 messages // set locale messages }) Vue.use(iView) 按照iview官网这样配置后，发现iview组件的国际化并没有生效，不知道什么原因（求解，完全按照官网来配置的），因此参考别人的博客，发现一种解决方案，把上面的最后一段代码替换成下面这样,就可以成功了。 Vue.use(iView, { i18n: (key, value) => i18n.t(key, value) }) 最后别忘了添加到vue中去，不然不生效 new Vue({ el: #app, i18n, router, store, render: h => h(App) })
4. vue文件中 添加点击事件 <div class="layout-header-middle"> <a @click="changeLanguage">{ {localeLanguage}}</a> </div> 设置data data(){ return{ localeLanguage : localStorage.getItem(locale) === en-US ? 中文 : EN } } js方法，存入localStorage中 changeLanguage() { if (this.$i18n.locale === en-US) { this.$i18n.locale = zh-CN this.localeLanguage = 中文 } else if (this.$i18n.locale === zh-CN) { this.$i18n.locale = en-US this.localeLanguage = EN } localStorage.setItem(locale, this.$i18n.locale)

由于项目中的一些私密信息不方便直接贴上代码，所以上面的代码很多是直接手写，所以可能会有一些错误，但是原理就是这个原理。如果有任何的错误，非常抱歉，请您指出来。