使用vite和vue-i18n，实现部署后更新多语言功能

vue-i18n是Vue.js的国际化插件，用于实现多语言功能。但是vue-i18n文档中提供的示例用法仅仅是开发时才可以添加/修改多语言。如果希望在打包部署后实现多语言的修改甚至增加语言，不需要修改源码或者重新打包，类似于我们常见的多语言包扩展，又该如何实现呢？

功能和工程结构

工程结构

为了方便后续说明，首先提供一下我这边整个项目的目录结构。目录结构中省略了与本次说明不相关的文件。这里使用的是Vue3，但是方法对vue2也适用。

|-- app|-- package.json|-- tsconfig.json|-- tsconfig.node.json|-- vite.config.ts|-- plugins| |-- rollup-plugin-i18n-build| |-- index.ts|-- src|-- main.ts|-- i18n| |-- ar-SA.yaml| |-- de-DE.yml| |-- en_US.json| |-- es-ES.json5| |-- index.ts| |-- zh_CN.json|-- pages|-- subject.vue 

代码中的多语言

开发时多语言默认存放在src/i18n文件夹中，也可以存放到其他位置。文件夹中存放各个语言的语言文件，以语言key命名。支持的文件格式有：

• json
• yaml
• yml
• json5

代码会自动查找上述后缀的文件作为语言文件。非上述后缀的文件，例如.ts .js多语言生成时会被忽略。

文件格式如下，使用vue-i18n接受的格式即可。可以嵌套结构，也可以平铺。

{"abc": {"def": "你好"},"def": "你好js","common": {"delete": "删除"}
} 

abc.def: hello
def: hello js
common.delete: delete 

构建包(dist)中的多语言目录

为了统一后端寻址，生成的的多语言文件默认统一放置在dist/assets/i18n，也可以存放到其他位置。生成后多语言的文件统一为平铺的json格式，方便同事进行翻译。

|-- dist|-- index.html|-- assets|-- vite.svg|-- i18n|-- ar-SA.json|-- de-DE.json|-- en_US.json|-- es-ES.json|-- zh_CN.json 

如果希望增加/修改多语言，就在构建包的多语言目录中增加/修改多语言文件即可，不需要修改代码或重新打包。

获取多语言的实现

代码执行时，多语言这边分为两种获取方式，开发模式从代码中的多语言中获取，生产版本从dist中获取。

开发模式获取多语言

// src/i18n/index.ts

import { createI18n } from 'vue-i18n'
import axios from 'axios'
import jsyaml from 'js-yaml'
import json5 from 'json5'

interface DeepRecord {[key: string]: DeepRecord | string
}

// 根据不同格式转换文件内容
function transFile(fileData: string, suffix: string): DeepRecord {switch (suffix) {case 'json':case 'json5':return json5.parse(fileData) as DeepRe