快捷導(dǎo)航

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

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

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

1. translate.js 簡介

translate.js 是一個自動翻譯組件，具有以下優(yōu)點：

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

但也有一些缺點：

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

?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)控頁面動態(tài)渲染的文本進(jìn)行自動翻譯
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：簡體中文

更多語言支持請參考文檔：translate.js 文檔

?5. 注意事項

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

?6. 總結(jié)

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