什么是 translate.js？
translate.js 是由 zvo.cn 團隊開發的輕量級前端翻譯庫（僅 28KB），支持全站內容實時翻譯。它通過智能解析 DOM 結構，結合云端翻譯引擎和本地詞庫混合模式，為網站提供流暢的多語言體驗。
官方地址：https://translate.zvo.cn/index.html
體驗地址：https://res.wang.market/translate/demo.html
? 核心優勢
- ? 支持 100+ 語言實時互譯
- ? 智能緩存機制減少重復請求
- ? 自動保留
HTML 標簽結構 - ? 支持
Google/DeepL 等多翻譯引擎 - ? 免費版提供基礎翻譯能力（商用建議授權）
?? 三分鐘快速集成（非npm包集成）
1. 通過cdn js方式集成
只需在項目的 index.html 頁底部添加如下代碼
<script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>
<script>
translate.service.use('client.edge')
translate.language.setDefaultTo('chinese_simplified')
translate.language.setLocal('chinese_simplified')
translate.listener.start()
translate.selectLanguageTag.show = true
translate.execute();
</script>
本人集成在 vue3 項目中, index.html 可以在根目錄也可以在public目錄，完整示例如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>
<script>
translate.service.use('client.edge')
translate.listener.start()
translate.selectLanguageTag.show = true
document.addEventListener('DOMContentLoaded', function () {
translate.execute()
})
</script>
</body>
</html>
2. 自定義樣式（示例）
.translate_selectLanguage_tag {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background: #4a6cf7;
color: white;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 3px 10px rgba(74, 108, 247, 0.4);
}
3. 高級配置項
translate.setAutoDiscriminateLocalLanguage();
translate.ignore.class.push('no-translate');
translate.setServiceProvider('google', {
proxyUrl: 'https://your-proxy-domain.com/translate'
});
translate.mapping.addVocabulary({
"首頁": "HomePage",
"聯系我們": "Contact Us"
});
?? 框架集成方案
Vue 單文件組件
- npm 引用
npm install i18n-jsautotranslate
- main.js 引用
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');
- app頁面引用
// App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import { ref, getCurrentInstance, nextTick } from 'vue'
const instance = getCurrentInstance()
const translate = instance.appContext.config.globalProperties.$translate
const language = ref('en')
function languageAuto() {
nextTick(() => {
translate.execute()
})
}
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="./assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
運行效果
?? 性能優化建議
本地緩存加速
translate.setCache(true); 啟用 localStorage 緩存翻譯結果
預加載語言包
translate.loadLanguage('english'); 用戶訪問時提前加載
排除動態內容
translate.execute(); 在 AJAX 加載后手動執行翻譯
CDN 加速
自托管庫文件：<script src="/path/to/local/translate.js">
?? 常見問題解決
Q: 翻譯后頁面布局錯亂？
A: 添加 CSS 規則：[translate] { display: inherit !important; }
Q: 圖片內容如何翻譯？
A: 使用數據屬性方案：
<img src="about.png"
data-translate_attr="src"
data-chinese_simplified="about_zh.png"
data-english="about_en.png">
Q: SEO 如何優化？
A: 結合服務端渲染，使用 聲明語言
### ?? 最佳實踐案例
```javascript
// 雙語混合模式（專業術語保留英文）
translate.specialTag.setKeepTexts({
tags: ['h2', 'h3'], // 標題保留原文
words: ['API', 'JSON'] // 特定術語保留
});
// 配合 i18n 實現精準控制
if (user.isProfessional) {
translate.mapping.addVocabulary(professionalTerms); // 導入專業詞庫
}
// 翻譯事件監聽
document.addEventListener('translate.onSuccess', (e) => {
console.log(`已翻譯 ${e.detail.total} 個字符`);
});
總結
translate.js 以極低的集成成本解決了網站國際化核心痛點。據官方數據，集成后平均提升：
- ?? 海外流量 170%+
- ?? 用戶停留時長 40%+
- ?? 轉化率 25%+
最后提醒：雖然免費版功能強大，但商業項目請遵循授權政策。對于高級需求（如 PDF 翻譯、私有化部署），建議聯系官方獲取企業版支持。
讓世界沒有語言障礙，translate.js 正在重新定義網站全球化標準！ ????
400 186 1886
