vue选择语言翻译页面

原创已于 2023-06-25 15:11:18 修改 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-05-22 14:32:10 首次发布

文章介绍了如何使用uniapp和js在项目中实现HTML页面的全自动翻译，无需改动页面，无需语言配置文件和APIKey，且对SEO友好。在onLaunch生命周期内执行代码，设置翻译语言和监听页面变化，即可自动翻译。还提供了自定义翻译的示例，以应对特定繁体语言类型的区分需求。

git 克隆或者下载下来 translate: 两行js实现html全自动翻译，页面无需改动，无语言配置文件，无API Key，对SEO友好！

README.md · 鬼画符/translate - 码云 - 开源中国 (gitee.com)

在utils下导入

在translate.js内默认导出

这里使用的是uniapp实例,在app.vue的onLoanch生命周期内执行

之后在页面中写好需要翻译的语言类型和样式

这里以三种语言为实例

自定义翻译

使用场景：默认翻译成繁体是区分不了港澳台三种繁体语言类型使用自定义翻译可以实现业务

默认简体 => 繁体

自定义实现效果

实现：

调用内置方法

translate.nomenclature.append(from, to, properties);

传入参数说明：

from 要转换的语言，传入，例如“chinese_simplified”
to 翻译成目标语言，传入“要翻译的语言类型”
properties 配置表格，格式为属性的格式，每行一个规则，前后各用等号分隔，等号前为待翻译的单词或句子，等号后为自定义翻译结果

onLaunch(() => {

  translate.setUseVersion2() //设置使用v2.x 版本
  translate.language.setLocal('chinese_simplified') //设置本地语种（当前网页的语种）。如果不设置，默认就是 'chinese_simplified' 简体中文。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明
  translate.listener.start() //开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
  translate.execute() //执行翻译初始化操作，显示出select语言选择
  translate.nomenclature.append('chinese_simplified','chinese_traditional',`
  商品分类=商品分類111
  香水=xiangshui
  `)
})