VUE 3 动态加载中英文 + 不编译随时添加中英文

项目部署后需要随时增加中英文，每次加完就需要重新打包编译比较麻烦，所以需要采用不打包中英文文件的方式即把中英文文件放在public文件夹下，便于随时添加资源，这种方式的配置步骤如下：

1、安装i8n，npm i vue-i18n

2、在public文件下添加lang文件夹，并且添加zh.js、en.js资源文件

3、在public的index.html文件中引用en.js和zh.js文件，这样zh和en就可以在项目中全局引用了

4、新建i18n.js文件，配置中英文的配置项

import { createApp } from 'vue'
import App from '../App.vue'
import { createI18n } from 'vue-i18n'


const app = createApp(App)
const lang_zh = zh;
const lang_en = en;

const message = {
  zh: lang_zh,
  en: lang_en
}

const i18n = createI18n({
  legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
  locale: "zh",
  messages: message
})

export default function (app) {
  app.use(i18n)
}

5、将I18n加入到main.js的配置项中

6、使用i18n

import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();

例如：

 $t(wpCode)