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();

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

三.总结：

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