0，新的插件 vue-cli-plugin-i18n 。

看下载量还是挺多的，目前没看到有什么亮点

1，常用功能。

用 require.context 加载指定目录下的所有语言包

期望的树结构：

1，所有文本堆在一个。（适用于文本量不大的情况下，即大部分场景都可以使用）

优点：无脑管理，不用思考拆包、动态加载、webpack 以及 i18n-ally 插件的配置。

缺点：多人合作下同时操作一个文件会容易冲突（最好就是彼此管理自己的文件）。配置 webpack 和 i18n-ally 会相对麻烦不少。

en.json

zh-cn.json

2，按页面进行分包。（适合文本量大的项目）

优点：解决多人合作下同时操作一个文件会容易冲突，管理方便（直接拆分多个文件）。基本杜绝 key 值重名的问题（哪怕重名了，也只是本文件内的重名，可以通过编辑器快速查到重名）。

缺点：配置是真的麻烦。

PS：个人不建议有二级文件夹（如下），尽量一个页面一个文件就好。（不然 i18n-ally 不好识别。反正我是没成功过！）

en:
pageA.json
pageB.json
childrenPage:
pageB1.json ……

zh-cn:
pageA.json
pageB.json
childrenPage:
pageB1.json ……

然后在 main.js 中集中加载，文件夹和文件名作为节点的key值并串联起来形成总的json对象。

最后给 i18n-ally 配置，让其能识别所有文件。

2021.09.02

最终解决方案：以文件夹分语言类型，按json文件分不同页面的文本。

即：

en:
index.js
pageA.json
pageB.json

zh-cn:
index.js
pageA.json
pageB.json

思路：用 index.js 去收集当前文件夹下所有 json 文件的数据，最终整合成一个 messages 对象。通过 import() 异步返回。

优点：真正的按需引入。方便多人协作的架构。json 文件名称即命名空间，保证不会命名冲突。目录清晰，妈妈再也不怕我找不到 key 了。配合 i18n-ally ，开发不要太舒服。

2，网页加载的时候该怎么去判断用户的语言环境呢？

判断顺序：

本地环境（localStorage、sessionStorage、cookies）

客户端环境（特指 浏览器 设置的语言环境），window.navigator.language （这 API 强啊，兼容性好。想要最好的兼容性，建议把返回值统一转成小写会更好哦！）

最后就是代码里的默认语言了。

3，如何优雅打包以及拆包？

第 2 点中已经回答。

4，VSCode 的 i18n-Ally 插件，让变量文本可视化。

文档有，简单易配。不建议用 js 记录文本。issues 区有我提问的问题。（目前不支持一键直接跳转到 js 文件中的文本）

5，zh 与 zh-cn（中国）、zh-hk（地区）、zh-tw 的差别 （仅个人理解）

zh 代表一类语言，这里是特指 中文 的意思。

而 zh-hk 是指中文环境下的香港地区

zh 包含 zh-cn（中国）、zh-hk（地区）、zh-tw

如果不需要分得太清，直接用语言代号简写即：zh 即可。

---