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@10

vscode在应用商城中搜索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文件中的模板引入$t是全局的不需要额外引入钩子 ，如果是在setup中需要单独引入相关Composition API例如：

如果用的t函数，会找不到需要单独手动在每个vue单文件中 使用useI18n去引出t函数：

import { useI18n } from "vue-i18n";
const { t } = useI18n();

至此大功告成！！！ 希望学习的小伙伴也能成功，今天的学习就到这里啦

三.总结：

后续再总结，先发布一版哈哈