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

更新时间：2024年01月10日 08:30:55 作者：RyzenVega

这篇文章主要给大家介绍了关于Vue项目引入translate.js国际化自动翻译组件的相关资料,除了基本的文本翻译功能之外,jstranslate还提供了一些高级功能,文中通过代码介绍的非常详细,需要的朋友可以参考下

该组件优点：

自动翻译自动匹配本地语种
利于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: zh,
  }
},

// 翻译
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() //进行翻译
},

4.备注

在请求接口数据返回选然后或者路由切换后

会出现一半原始语种一半翻译语种的情况

此时可以在请求拦截器的相应拦截和路由后置守卫里添加

this.$translate.execute() //进行翻译

vue 报错的情况下可以如下操作

import Vue from 'vue'

let vm = new Vue()
vm.$nextTick(() => {
   vm.$translate.execute()
})

总结

到此这篇关于Vue项目引入translate.js国际化自动翻译组件的文章就介绍到这了,更多相关Vue引入translate.js组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用pdf.js预览pdf文件的方法
在页面进行pdf预览的时候，由于文件不能够打印和下载很难满足客户的需求，接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下
2021-12-12
vue解决子组件样式覆盖问题scoped deep
文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件必须使用scoped,以避免样式冲突,对于父组件覆盖子组件的样式,作者推荐给子组件指定自定义类名
2025-01-01
Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程
这篇文章主要介绍了Vue+Koa+MongoDB从零打造一个任务管理系统,本文通过图文实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue 取出v-for循环中的index值实例
今天小编就为大家分享一篇vue 取出v-for循环中的index值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue单向数据绑定和双向数据绑定方式
这篇文章主要介绍了vue单向数据绑定和双向数据绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue、uniapp中动态添加绑定style、class 9种实现方法
这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
uni-app进阶使用技巧分享
uni-app是一款基于Vue.js的跨平台开发框架，它借助了 Vue.js 的语法和组件化开发思想，本文将详细介绍 uni-app 的全局配置、静态资源管理、路由管理以及数据通信和状态管理的进阶使用技巧,需要的朋友可以参考下
2023-06-06
element用脚本自动化构建新组件的实现示例
本文主要介绍了element-ui的用脚本自动化构建新组件的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
浅谈Vue中的this.$store.state.xx.xx
这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-09-09