Vue项目中引入translate.js实现国际化自动翻译功能实例

2025-09-20 12:35:58 来源：互联网作者：_gxy 人气： 次阅读

translate.js帮你一行代码搞定翻译,支持Google、DeepL、LibreTranslate等多个主流翻译引擎，Node.js和浏览器通用，这篇文章主要介绍了Vue项目中引入translate.js实现国际化自动翻译功能的相关资料，需要的朋友可以参考下。

1. translate.js 简介

translate.js 是一个自动翻译组件，具有以下优点：

  1. ​自动翻译：自动匹配本地语种，无需手动维护翻译字典。
  2. ​利于 SEO：对搜索引擎友好，提升网页的搜索排名。
  3. ​使用简单：直接引入即可使用。
  4. ​瞬时翻译：使用缓存预加载，翻译速度快。

但也有一些缺点：

  1. ​DOM 不刷新：DOM 内容刷新时不会自动翻译，需手动调用翻译方法。
  2. ​中译英时 DOM 节点仍为中文：获取 DOM 节点时，内容仍为中文，可能影响某些场景。

​2. 安装与引入

​2.1 安装

通过 npm 安装 translate.js：

npm i i18n-jsautotranslate

​2.2 引入

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

import translate from 'i18n-jsautotranslate';
 
// 设置使用 v2.x 版本
translate.setUseVersion2();
 
// 是否显示语言切换栏
translate.selectLanguageTag.show = false;
 
// 监控页面动态渲染的文本进行自动翻译
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(); // 执行翻译
}

​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(); // 执行翻译
}

​4. 支持的语言

translate.js 支持多种语言，例如：

  • ​English：英文
  • ​chinese_traditional：繁体中文
  • ​chinese_simplified：简体中文

更多语言支持请参考文档：translate.js 文档

​5. 注意事项

​DOM 刷新问题

当 DOM 内容刷新时，translate.js 不会自动翻译，需手动调用 translate.execute()。

​SEO 优化

虽然 translate.js 对 SEO 友好，但在中译英时，DOM 节点内容仍为中文，需结合 i18n 使用以优化 SEO。

​性能优化

translate.js 使用缓存预加载，但频繁翻译可能影响性能，建议合理使用。

​6. 总结

特性 说明
​自动翻译 自动匹配本地语种，无需维护翻译字典
​利于 SEO 对搜索引擎友好，提升网页搜索排名
​使用简单 直接引入即可使用
​瞬时翻译 使用缓存预加载，翻译速度快
​DOM 刷新问题 DOM 内容刷新时需手动调用翻译方法
​中译英 DOM 节点 获取 DOM 节点时内容仍为中文

到此这篇关于Vue项目中引入translate.js实现国际化自动翻译功能的文章就介绍到这了,更多相关Vue实现国际化自动翻译内容请继续浏览下面的相关文章！

JavaScript数据结构
您可能感兴趣的
上一篇：
Vue3中实现Excel导出(含图片导出)功能完整方案
下一篇：
使用Vue+Tippy.js打造高定制浮层提示组件(Tooltip/Popover)