vue3 环境配置vue-i8n国际化
一.依赖和插件的安装
主要是vue-i18n和 vscode的自动化插件i18n Ally
https://vue-i18n.intlify.dev/
npm install vue-i18n@10
pnpm add vue-i18n@10
yarn add vue-i18n@10vscode在应用商城中搜索i18n Ally：如图
二.实操
安装完以后在对应项目中的跟package.json同级的目录下建立对该i8n ally插件的设置，也可以设置为全局 在.vscode文件下新建setting.json配置如下：
{
"i18n-ally.localesPaths": ["src/lang"], // 项目的翻译的储存路径
// 如下须要手动配置
"i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested：嵌套式 flat:扁平式)
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": ["json"], // 翻译文件可允许的格式，默认json
"i18n-ally.sourceLanguage": "zh", // 根据此语言文件翻译其他语言文件的变量和内容
"i18n-ally.displayLanguage": "zh", // 显示语言
"i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
"i18n-ally.translate.engines": ["google"],
"i18n-ally.enabledFrameworks": ["vue"],
"i18n-ally.editor.preferEditor": true,
"i18n-ally.extract.autoDetect": false
}
项目的语言国际化目录如图：
新建lang文件夹，新建en.json,zh.json,index.js
其中index.js是初始化vue-I18n的实例如下：
import { createI18n } from "vue-i18n";
import EN from "./en";
import ZH from "./zh";
const messages = {
zh: {
...ZH,
},
en: {
...EN,
},
};
const currentLang = window.sessionStorage.getItem("lang_IAP") || "zh";
const i18n = createI18n({
locale: currentLang, // 设置当前语言类型
legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
globalInjection: true, // 全局注册$t方法
messages,
});
export default i18n;
然后在main.ts中全局注册：
import i18n from "./lang";
import App from "./App.vue";
const app = createApp(App);
app.use(i18n);
app.mount("#app");
然后选中某个要翻译的vue单文件，在最左侧会出现一个关于i18n Ally插件的ui图标点击打开可以出现一个UI编辑器 对应的就是该vue单文件的文字解析如图：
需要知道两个功能一个是hard-coded，单击选择第一个生成对应的k-v值
第二个就是中文翻译成英文需要再下方确实的文案中选中 ，单击然后选择全部翻译如图：
此时就会自动在json中生成en.json,zh.json对应的k-v
自动捉取文字，翻译录入json，vue替换对应的语法就都自动完成了但是需要注意的vue单文件可能会报错，因为这个环境使用的是vue3而非vue2，所以$t可能找不到需要单独手动在每个vue单文件中 使用useFN去引出t函数：
import { useI18n } from "vue-i18n";
const { t } = useI18n();至此大功告成！！！ 希望学习的小伙伴也能成功，今天的学习就到这里啦
三.总结：
后续再总结，先发布一版哈哈