Vue国际化搭配 VSCode i18n Ally插件使用初体验_i18n-ally_梦里谁知身是客的博客-CSDN博客
i18n Ally安装
本文仅作基本使用,有更多的功能请查阅官方文档:
Github
Gitee
VSCode扩展搜索i18n Ally安装
创建Vite项目
这里使用的是vite创建的项目,添加vue-i18n@next的库
yarn create vite
...
√ Project name: ... i18n-demo
√ Select a framework: » vue
√ Select a variant: » vue-ts
...
// 添加yarn add vue-i18n@next
yarn add vue-i18n@next
1
2
3
4
5
6
7
8
创建多语言
创建locales文件夹,用于维护多语言
├─.vscode
├─public
└─src
├─assets
├─components
└─locales //新建
└─lang
├─en
└─zh-CN
1
2
3
4
5
6
7
8
9
在en和zh-CN文件夹中添加user.ts,也可使用其他格式
Format Read Write Annotations Note
JSON ✅ ✅ ✅
YAML ✅ ✅ ✅ Comments will NOT be preserved*
JSON5 ✅ ✅ ❌ Comments will NOT be preserved*
INI ✅ ✅ ❌ Comments will NOT be preserved*
properties ✅ ✅ ❌ Comments will NOT be preserved*
POT ✅ ✅ ❌
JavaScript ✅ ❌ ❌ Read-only
TypeScript ✅ ❌ ❌ Read-only
PHP ✅ ❌ ❌ Read-only
lang/en/user.ts
export default {
name: "name",
age: "age",
height: "height",
weight: "weight",
};
1
2
3
4
5
6
7
lang/zh-CN/user.ts
export default {
name: "姓名",
age: "年龄",
height: "身高",
weight: "体重",
};
1
2
3
4
5
6
7
在lang文件中增加index.ts导出所有的多语言文件,可以用vite中的const modules = import.meta.globEager("./**/*.ts");导出所有文件,这里我仅作插件的使用说明,故直接导出了。
lang/index.ts
import en from "./en/user";
import zh from "./zh-CN/user";
export default {
en,
"zh-CN": zh,
};
1
2
3
4
5
6
7
8
导出i18n
在locales/下创建index.ts,导出i18n实例,这里也仅仅是简单导出,并没有做其他处理。实际项目中,需要切换多语言,最好不要把所有的语言都导出,需要时再导出其他语言。
locales/index.ts
import { createI18n } from "vue-i18n";
import messages from "./lang/index";
export const i18n = createI18n({
locale: "zh-CN",
fallbackLocale: "en",
messages,
});
1
2
3
4
5
6
7
8
9
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./locales/index";
createApp(App).use(i18n).mount("#app");
1
2
3
4
5
6
以上我们代码中的配置已经完成了,可以先在APP.vue测试一下
// 去除模板多余的代码
<script setup lang="ts">
// 导入useI18n
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<div>
<span>{{ t('name') }}:</span>
<span>皮卡丘</span>
</div>
<div>
<span>{{ t('age') }}:</span>
<span>5</span>
</div>
<div>
<span>{{ t('weight') }}:</span>
<span>50</span>
</div>
<div>
<span>{{ t('height') }}:</span>
<span>100</span>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
启用i18n Ally
这里有两种方式
在VSCode设置文件中设置
在项目文件中设置
我这里更推荐第二种设置
找到.vscode文件夹,添加settings.json
.vscode/settings.json
{
"i18n-ally.localesPaths": ["src/locales/lang"],
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
// "i18n-ally.namespace": true,
// "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
"i18n-ally.enabledParsers": ["ts", "json"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue", "react"]
}
1
2
3
4
5
6
7
8
9
10
11
12
设置以后,回到APP.vue中,可以看出插件已经帮我们显示了当前的语言翻译。
上面把namespace和pathMatcher禁用了,这两条是开启命名空间,开启以后,会将文件名映射到I18N键的根目录。
不过namespace开启的同时,在导出多语言文件的时候也要同步加上key,不然这样做插件是能识别的,页面显示的不正确
locales/lang/index
import en from "./en/user";
import zh from "./zh-CN/user";
export default {
en: {
user: en // 添加对应的key
},
"zh-CN": {
user: zh
},
};
1
2
3
4
5
6
7
8
9
10
11
12
//开启前使用
<div>
<span>{{ t('name') }}:</span>
<span>皮卡丘</span>
</div>
// 开启后使用
<div>
<span>{{ t('user.name') }}:</span>
<span>皮卡丘</span>
</div>
————————————————
版权声明:本文为CSDN博主「梦里谁知身是客」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wn1245343496/article/details/121533381