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

创建多语言

创建locales文件夹,用于维护多语言

├─.vscode
├─public
└─src
    ├─assets
    ├─components
    └─locales //新建 
        └─lang
            ├─en
            └─zh-CN

enzh-CN文件夹中添加user.ts,也可使用其他格式

FormatReadWriteAnnotationsNote
JSON
YAMLComments will NOT be preserved*
JSON5Comments will NOT be preserved*
INIComments will NOT be preserved*
propertiesComments will NOT be preserved*
POT
JavaScriptRead-only
TypeScriptRead-only
PHPRead-only

在这里插入图片描述

lang/en/user.ts

export default {
  name: "name",
  age: "age",
  height: "height",
  weight: "weight",
};

lang/zh-CN/user.ts

export default {
  name: "姓名",
  age: "年龄",
  height: "身高",
  weight: "体重",
};

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,
};

导出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,
});

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./locales/index";

createApp(App).use(i18n).mount("#app");

以上我们代码中的配置已经完成了,可以先在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>

启用i18n Ally

这里有两种方式

  1. 在VSCode设置文件中设置
  2. 在项目文件中设置
    我这里更推荐第二种设置
    找到.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"]
  }
  

设置以后,回到APP.vue中,可以看出插件已经帮我们显示了当前的语言翻译。
在这里插入图片描述

上面把namespacepathMatcher禁用了,这两条是开启命名空间,开启以后,会将文件名映射到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
  },
};

//开启前使用
 <div>
    <span>{{ t('name') }}:</span>
    <span>皮卡丘</span>
  </div>

// 开启后使用
<div>
    <span>{{ t('user.name') }}:</span>
    <span>皮卡丘</span>
  </div>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐