i18n Ally安裝

本文僅作基本使用，有更多的功能請查閱官方文檔：

Github

Gitee

VSCode擴(kuò)展搜索i18n Ally安裝

Snipaste_2021-11-25_09-49-08.png

Snipaste_2021-11-25_11-11-11.png

創(chuàng)建Vite項(xiàng)目

這里使用的是vite創(chuàng)建的項(xiàng)目，添加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

創(chuàng)建多語言

創(chuàng)建locales文件夾，用于維護(hù)多語言

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

在en和zh-CN文件夾中添加user.ts，也可使用其他格式

Snipaste_2021-11-25_10-45-30.png

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導(dǎo)出所有的多語言文件，可以用vite中的const modules = import.meta.globEager("./**/*.ts");導(dǎo)出所有文件，這里我僅作插件的使用說明，故直接導(dǎo)出了。

lang/index.ts

import en from "./en/user";
import zh from "./zh-CN/user";

export default {
  en,
  "zh-CN": zh,
};

導(dǎo)出i18n

在locales/下創(chuàng)建index.ts，導(dǎo)出i18n實(shí)例，這里也僅僅是簡單導(dǎo)出，并沒有做其他處理。實(shí)際項(xiàng)目中，需要切換多語言，最好不要把所有的語言都導(dǎo)出，需要時(shí)再導(dǎo)出其他語言。

Snipaste_2021-11-25_10-45-15.png

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

以上我們代碼中的配置已經(jīng)完成了，可以先在APP.vue測試一下

// 去除模板多余的代碼
<script setup lang="ts">
// 導(dǎo)入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設(shè)置文件中設(shè)置
2. 在項(xiàng)目文件中設(shè)置
   我這里更推薦第二種設(shè)置
   找到.vscode文件夾，添加settings.json
   
   Snipaste_2021-11-25_11-13-35.png

.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"]
  }
  

設(shè)置以后，回到APP.vue中，可以看出插件已經(jīng)幫我們顯示了當(dāng)前的語言翻譯。
上面把namespace和pathMatcher禁用了，這兩條是開啟命名空間，開啟以后，會(huì)將文件名映射到I18N鍵的根目錄。
不過namespace開啟的同時(shí)，在導(dǎo)出多語言文件的時(shí)候也要同步加上key，不然這樣做插件是能識(shí)別的，頁面顯示的不正確
locales/lang/index

import en from "./en/user";
import zh from "./zh-CN/user";

export default {
  en: {
      user: en // 添加對(duì)應(yīng)的key
  },
  "zh-CN": {
      user: zh
  },
};

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

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