Vue项目引入translate.js 国际化自动翻译组件

建议 translate.js 配合 i18 使用

本文只介绍 translate.js 的引入和使用方式

无论什么库 在翻译上 都不会做到 ( 100%翻译 && 100%准确 ) 所以不要吹毛求疵

官方文档:translate.js 前端翻译

该组件优点:

  • 自动翻译 自动匹配本地语种
  • 利于SEO 对搜索引擎友好
  • 使用简单 直接引入使用即可
  • 瞬时翻译 使用了缓存预加载

该组件缺点

  • 正因为利于SEO 假设中译英 获取DOM节点的时候还是中文
  • DOM不刷新 DOM内容刷新时 不会自动翻译 所以最好配合 i18 使用

1. 安装

复制代码
npm i i18n-jsautotranslate

2. 引入

在main.js内

复制代码
import translate from 'i18n-jsautotranslate'
translate.setUseVersion2() //设置使用v2.x 版本
translate.selectLanguageTag.show = false //是否显示切换栏
translate.listener.start()
Vue.prototype.$translate = translate

3. 使用

只保留关键代码

大体逻辑是在 localStorage 里存入一个 val 根据这个 val 去判断要切换的语种

复制代码
<div @click="languageAuto()"> 一键翻译 </div>



data() {
  return {
    language: '',
  }
},


// 翻译
languageAuto() {
  this.language == 'zh' ? (this.language = 'en') : (this.language = 'zh')
  localStorage.setItem('language', `{"language":"${this.language}"}`)
  if (this.language == 'zh') {
    console.log('转为中文')
    this.$translate.changeLanguage('chinese_simplified')
  }
  if (this.language == 'en') {
    console.log('转为英文')
    this.$translate.changeLanguage('english')
  }
  this.$translate.execute() //进行翻译
},
相关推荐
RadiumAg20 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo24 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele40 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1235 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜055 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js