快捷導(dǎo)航

Vue項(xiàng)目中引入translate.js實(shí)現(xiàn)國際化自動(dòng)翻譯功能實(shí)例

更新時(shí)間：2025年07月22日 09:39:45 作者：_gxy

translate.js幫你一行代碼搞定翻譯,支持Google、DeepL、LibreTranslate等多個(gè)主流翻譯引擎,Node.js和瀏覽器通用,這篇文章主要介紹了Vue項(xiàng)目中引入translate.js實(shí)現(xiàn)國際化自動(dòng)翻譯功能的相關(guān)資料,需要的朋友可以參考下

1. translate.js 簡(jiǎn)介

translate.js 是一個(gè)自動(dòng)翻譯組件，具有以下優(yōu)點(diǎn)：

?自動(dòng)翻譯：自動(dòng)匹配本地語種，無需手動(dòng)維護(hù)翻譯字典。
?利于 SEO：對(duì)搜索引擎友好，提升網(wǎng)頁的搜索排名。
?使用簡(jiǎn)單：直接引入即可使用。
?瞬時(shí)翻譯：使用緩存預(yù)加載，翻譯速度快。

但也有一些缺點(diǎn)：

?DOM 不刷新：DOM 內(nèi)容刷新時(shí)不會(huì)自動(dòng)翻譯，需手動(dòng)調(diào)用翻譯方法。
?中譯英時(shí) DOM 節(jié)點(diǎn)仍為中文：獲取 DOM 節(jié)點(diǎn)時(shí)，內(nèi)容仍為中文，可能影響某些場(chǎng)景。

?2. 安裝與引入

?2.1 安裝

通過 npm 安裝 translate.js：

npm i i18n-jsautotranslate

?2.2 引入

在 main.js 中引入并配置 translate.js：

import translate from 'i18n-jsautotranslate';

// 設(shè)置使用 v2.x 版本
translate.setUseVersion2();

// 是否顯示語言切換欄
translate.selectLanguageTag.show = false;

// 監(jiān)控頁面動(dòng)態(tài)渲染的文本進(jìn)行自動(dòng)翻譯
translate.listener.start();

// Vue 2
Vue.prototype.$translate = translate;

// Vue 3
app.config.globalProperties.$translate = translate;

?3. 使用 translate.js

?3.1 Vue 2 中使用

// 切換語言并翻譯
function languageAuto() {
  const language = this.$translate.getLanguage();
  if (language === "zh") {
    this.$translate.changeLanguage("english");
  } else {
    this.$translate.changeLanguage("chinese_simplified");
  }
  this.$translate.execute(); // 執(zhí)行翻譯
}

?3.2 Vue 3 中使用

import { ref, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const translate = instance.appContext.config.globalProperties.$translate;

const language = ref("en");

function languageAuto() {
  language.value === "zh" ? (language.value = "en") : (language.value = "zh");
  localStorage.setItem("language", JSON.stringify({ language: language.value }));

  if (language.value === "zh") {
    translate.changeLanguage("chinese_simplified");
  } else {
    translate.changeLanguage("english");
  }
  translate.execute(); // 執(zhí)行翻譯
}

?4. 支持的語言

translate.js 支持多種語言，例如：

?English：英文
?chinese_traditional：繁體中文
?chinese_simplified：簡(jiǎn)體中文

更多語言支持請(qǐng)參考文檔：translate.js 文檔

?5. 注意事項(xiàng)

?DOM 刷新問題
- 當(dāng) DOM 內(nèi)容刷新時(shí)，translate.js 不會(huì)自動(dòng)翻譯，需手動(dòng)調(diào)用 translate.execute()。
?SEO 優(yōu)化
- 雖然 translate.js 對(duì) SEO 友好，但在中譯英時(shí)，DOM 節(jié)點(diǎn)內(nèi)容仍為中文，需結(jié)合 i18n 使用以優(yōu)化 SEO。
?性能優(yōu)化
- translate.js 使用緩存預(yù)加載，但頻繁翻譯可能影響性能，建議合理使用。

?6. 總結(jié)

特性	說明
?自動(dòng)翻譯	自動(dòng)匹配本地語種，無需維護(hù)翻譯字典
?利于 SEO	對(duì)搜索引擎友好，提升網(wǎng)頁搜索排名
?使用簡(jiǎn)單	直接引入即可使用
?瞬時(shí)翻譯	使用緩存預(yù)加載，翻譯速度快
?DOM 刷新問題	DOM 內(nèi)容刷新時(shí)需手動(dòng)調(diào)用翻譯方法
?中譯英 DOM 節(jié)點(diǎn)	獲取 DOM 節(jié)點(diǎn)時(shí)內(nèi)容仍為中文

到此這篇關(guān)于Vue項(xiàng)目中引入translate.js實(shí)現(xiàn)國際化自動(dòng)翻譯功能的文章就介紹到這了,更多相關(guān)Vue實(shí)現(xiàn)國際化自動(dòng)翻譯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: