vue3 环境配置vue-i8n国际化

悠悠~飘

已于 2024-10-07 14:09:13 修改

阅读量1.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 国际化文章标签： vue.js javascript

于 2024-10-01 19:18:58 首次发布

本文链接：https://blog.csdn.net/weixin_48813932/article/details/142673469

一.依赖和插件的安装

主要是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.extrac