项目需要对多语言进行支持，所以使用了(vue-i18n) ，但是最后打包后，语言文字相关的配置信息也会被打包，这样如果要更改语言文字的文案，就只能修改源码，然后再进行打包才能使最新的语言文字生效。那么如何能够在打完包后依然可以修改语言包，并且修改后不需要重新打包呢？
将语言文件配置放在public目录下
因为public目录下的资源不会被打包，这样就可以直接修改语言配置文件了
关键原理：语言文字的配置文件通过js预先加载到页面，同时将对应的语言配置作为一个全局变量，从而被i18n引用到。
创建语言配置文件
-
在public目录下创建中英文配置项文件
创建语言配置文件 - 注意配置文件中语言是用一个变量声明的,
// zh.js
const zh = {
operate: '操作',
select: '选择',
edit: '编辑',
}
// en.js
const en = {
operate: 'Operate',
select: 'Select',
edit: 'Edit',
}
在public目录index.html中引入en.js和zh.js
引入语言文件
修改main.js中i18n相关配置
const lang_zh = zh //获取默认中文 因为zh已经在index.html中加载过了，所以是个全局变量
const lang_en = en //获取默认英文
const messages = {
en: lang_en,
zh: lang_zh
}
const i18n = new VueI18n({
locale: 'en',
messages,
})
new Vue({
i18n,
store,
router,
render: h => h(App)
}).$mount('#app')
需要待优化问题
- 语言文字文件需要预先加载，可能会占用过多网络资源消耗，由于目前只有中英文两个语言，所以暂时不进行处理。可以通过远程加载翻译文件的方式进行解决
将语言文字转成json后再进行远程请求，请求到的数据后，使用
i18n.setLocaleMessage()加载翻译
$.get("zh.json").done((result)=>{
i18n.setLocaleMessage('zh',result.zh); // 使用`i18n.setLocaleMessage()`远程加载翻译文件
