說明文檔： vue-i18n
版本說明：
vue: 3.0.0+
vue-i18n: 9.x版
安裝
npm install vue-i18n@9
// 或者
yarn add vue-i18n@9
創(chuàng)建實例
-
src目錄下新建目錄lang，存放i18n的配置。新建目錄名稱：
lang(語言)、locales(語系設(shè)定)、i18n，這些名稱都可被VSCode圖標插件（vscode-icons）檢測到并美化。 -
lang目錄下，新建index.js文件，引入vue-i18n。 -
語言的配置信息放在另外的文件中。
例如，設(shè)置
英文和中文兩種語言類型：新建存放中文配置的文件zh.json和存放英文的文件en.json； 然后在index.js中引入。
vue-i18n使用createI18n創(chuàng)建實例，下面代碼新建了一個i18n實例：
文件位置：
src/lang/index.js
import { createI18n } from "vue-i18n";
import EN from "./en";
import ZH from "./zh";
const messages = {
zh: {
...ZH,
},
en: {
...EN,
},
};
const i18n = createI18n({
locale: "zh", // 設(shè)置當前語言類型
legacy: false, // 如果要支持compositionAPI，此項必須設(shè)置為false;
globalInjection: true, // 全局注冊$t方法
messages,
});
export default i18n;
語言配置文件
// zh.json
{
"hello": "你好"
}
// en.json
{
"hello": "hello"
}
全局注冊
i18n實例在項目中使用前，需要在入口文件中注冊一下。
進入main.js文件，引入并注冊i18n：
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang'
const app = createApp(App)
app.use(i18n)
app.mount('#app')
使用
模板中使用
在template模板中使用，這個比較簡單，直接使用全局方法$t：
<template>
{{ $t('hello') }}
</template>
頁面中正常顯示：
你好
切換英文：src/lang/index.js
const i18n = createI18n({
locale: "en", // 設(shè)置當前語言類型
legacy: false, // 如果要支持compositionAPI，此項必須設(shè)置為false;
globalInjection: true, // 全局注冊$t方法
messages,
});
頁面中正常顯示：
hello
JS中使用
<template>
{{ $t('hello') }}
</template>
<script>
import { getCurrentInstance } from "vue";
import i18n from '@/lang'; // 引入i8n實例
import { useI18n } from 'vue-i18n';
export default {
setup() {
// 第一種方法：獲取i18n實例對象 t 的方法1
const { proxy } = getCurrentInstance();
const t1 = proxy.$t('hello');
console.log(t1);
// 第二種方法：獲取i18n實例對象 t 的方法1
const t2 = i18n.global.t('hello');
console.log(t2);
// 第三種方法：獲取i18n實例對象 t 的方法3
const { t } = useI18n() // 解構(gòu)出t方法
const t3 = t('hello');
console.log(t3);
return {};
},
mounted() {
// 第四種方法：獲取i18n實例對象 t 的方法4
const t4 = this.$t('hello');
console.log(t4);
},
};
</script>
語言切換
效果
代碼
<template>
<label for="lang-select">Change language:</label>
<select name="lang" id="lang-select" @change="changeLang">
<option value="en">English</option>
<option value="zh" selected>簡體中文</option>
</select>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>模板中使用</td>
<td> {{ $t('hello') }}</td>
</tr>
<tr>
<td>JS中響應(yīng)式切換語言</td>
<td> {{ hel }}</td>
</tr>
<tr>
<td>當前語言類型</td>
<td> {{ currentLang }}</td>
</tr>
</table>
</template>
<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n();
const changeLang = parameter => {
const lang = parameter.target.value;
locale.value = lang; // 切換語言
localStorage.setItem('LANG', lang); // 本地存儲當前語言類型
}
// 獲取當前語言類型
const currentLang = computed(() => locale.value);
// JS中響應(yīng)式切換中英文（寫入computed中即可）
const hel = computed(() => t('hello'));
</script>
<style scoped>
table {
margin-top: 50px;
}
table tr td {
padding: 2px 5px;
}
</style>
VSCode插件i18n Ally
說明文檔：i18n ally
VSCode中安裝i18n Ally插件
啟用 i18n Ally
前提是項目中需要安裝
vue-i18n插件！
配置說明
這里有兩種方式
- 在VSCode設(shè)置文件中設(shè)置
- 在項目文件中設(shè)置（推薦）
在項目文件中設(shè)置：
項目根目錄中找到.vscode文件夾，添加settings.json
或者自動生成：
使用記錄中，完成創(chuàng)建實例步驟后，需要重啟VSCode，
又下角彈出如下提示：自動檢測到翻譯文件夾 “src/lang”
會在項目根目錄
.vscode目錄下，自動新建文件settings.json
需手動配置：
文件位置：
.vscode/settings.json基本配置說明：說明文檔
{
"i18n-ally.localesPaths": ["src/lang"], // 翻譯文件路徑 (自動生成) 相對于項目根目錄的語言環(huán)境目錄路徑
// 如下須要手動配置
"i18n-ally.keystyle": "nested", // 翻譯路徑格式 (翻譯后變量格式 nested：嵌套式 flat:扁平式)
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": ["json"], // 翻譯文件可允許的格式，默認json
"i18n-ally.sourceLanguage": "zh", // 翻譯源語言 (源文件) 根據(jù)此語言文件翻譯其他語言文件的變量和內(nèi)容
"i18n-ally.displayLanguage": "zh", // 顯示語言 (顯示文件/翻譯文件)
"i18n-ally.translate.engines": ["deepl", "google"], // 翻譯器
"i18n-ally.extract.keygenStyle": "camelCase", // 翻譯字段命名樣式采用駝峰
"i18n-ally.enabledFrameworks": ["vue"],
}
配置好后，若未生效，可嘗試右下角的
修改源語言，顯示語言（
i18n-ally.displayLanguage）不要寫死，否則顯示語言固定，修改顯示語言不生效
翻譯文件可允許的格式(
i18n-ally.enabledParsers)，填寫JSON或YAML格式，功能全面。前面創(chuàng)建的兩個語言配置文件zh.json和en.json，所以這里填寫["json"]支持的語言環(huán)境格式
Format（格式） Read（讀） Write（寫） Annotations（附注） Note（注意） JSON ? ? ? YAML ? ? ? 評論將不被保留 JSON5 ? ? ? 評論將不被保留 INI ? ? ? 評論將不被保留 properties ? ? ? 評論將不被保留 POT ? ? ? JavaScript ? ? ? 只讀 TypeScript ? ? ? 只讀 PHP ? ? ? 只讀
插件的翻譯器掛VPN才能使用
效果
配置完成之后，展示效果如下：
EN hello之后的圖標，依次為：
- 打開審閱：對文案進行批注
- 翻譯文案：在配置中設(shè)置的翻譯源語言（
"i18n-ally.sourceLanguage": "zh"）是中文，所以對其他語種有翻譯功能- 編輯文案：對該文案進行快捷編輯
- 轉(zhuǎn)到定義：跳轉(zhuǎn)到原文件
使用說明
打開一個有文字內(nèi)容的vue文件
打開 i18n Ally 的控制面板
快捷提取文案（兩種操作方式）
提取到的文案會寫入到顯示語言設(shè)置的對應(yīng)翻譯文件中：
"i18n-ally.displayLanguage": "zh"
- 展開
Hard-coded strings [beta]這一項，可單個提取文案（可以自定義key值）
-
右擊
Hard-coded strings [beta]這一項，選擇提取所有，采用默認key值。漢語使用拼音拼接，可在設(shè)置中將翻譯字段命名樣式采用駝峰：
i18n-ally.extract.keygenStyle": "camelCase"
提取單個文案
無注意點。
提取所有文案
可以看到，template模板中的文案都已被成功替換，但js語法中的替換還是vue2中的語法。
可以選擇單個替換，選擇對應(yīng)的替換代碼。也可以提取后更改所有匹配項this.$t。
zh.json中已被成功寫入：
{
"hello": "你好",
"haHaHa": "哈哈哈",
"dangQianYuYanLeiXing": "當前語言類型",
"jsZhongXiangYingShiQieHuanYuYan": "JS中響應(yīng)式切換語言",
"moBanZhongShiYong": "模板中使用",
"jianTiZhongWen": "簡體中文",
"english": "English",
"changeLanguage": "Change language:"
}
翻譯缺失文案
還有一個是翻譯缺失文案的功能，翻譯之后可直接將文案添加到對應(yīng)文件，需要掛VPN才能使用，手動編輯也可以。
翻譯依據(jù)為
"i18n-ally.sourceLanguage": "zh"設(shè)置的翻譯源語言
Magic VPN - 最好的免費代理工具
Edge瀏覽器下載插件，再下載客戶端，即可掛VPN
操作示例
如下，開啟VPN后，點擊缺失文案，即可依據(jù)zh.json文件中的JSON字段，將翻譯后的文案，自動寫入en.json文件中。
若開啟VPN后翻譯失敗，顯示日志打?。?/p>
ERROR: Error: connect ECONNREFUSED 127.0.0.1:xxxxx這是因為使用VSCode打開此項目后才開啟VPN的原因，重啟VSCode即可。
翻譯結(jié)果如下：文章來源：http://www.zghlxwxcb.cn/news/detail-653863.html
{
"hello": "hello",
"changeLanguage": "Change language:",
"dangQianYuYanLeiXing": "current language type",
"english": "English",
"haHaHa": "Hahaha",
"jianTiZhongWen": "Simplified Chinese",
"jsZhongXiangYingShiQieHuanYuYan": "Responsive switching language in JS",
"moBanZhongShiYong": "used in the template"
}
如此，這款插件便大大節(jié)省了工作量！文章來源地址http://www.zghlxwxcb.cn/news/detail-653863.html
到了這里，關(guān)于Vue3中，國際化插件vue-i18n使用記錄，配合VSCode自動化翻譯插件i18n Ally的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
