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 translate peoject实现在线翻译功能【新手必看】

深入浅析Vue.js中 computed和methods不同机制
这篇文章给大家介绍了Vue.js中 computed和methods不同机制，在vue.js中，methods和computed两种方式来动态当作方法使用，文中还给大家提到了computed和methods的区别，感兴趣的朋友一起看看吧
2018-03-03
详解Vue自定义指令及使用
这篇文章主要介绍了Vue自定义指令及使用，对Vue感兴趣的同学，可以参考下
2021-05-05
多个vue项目复用一个node_modules的问题
这篇文章主要介绍了多个vue项目复用一个node_modules的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue-cli3.x + axios 跨域方案踩坑指北
这篇文章主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue 源码分析之 Observer实现过程
这篇文章主要介绍了 Vue 源码分析之 Observer实现过程，Observer 最主要的作用就是实现了touch -Data(getter) - Collect as Dependency这段过程，也就是依赖收集的过程，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-03-03
vue中post请求报400的解决方案
这篇文章主要介绍了vue中post请求报400的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
VUE学习之Element-ui文件上传实例详解
今天进行了element 文件上传组件的运用,写一下心得,下面这篇文章主要给大家介绍了关于VUE学习之Element-ui文件上传的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
vue iview多张图片大图预览、缩放翻转
这篇文章主要为大家详细介绍了vue iview多张图片大图预览、缩放翻转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue首页加载白屏原因以及10种解决方法汇总
这篇文章主要介绍了Vue首页加载白屏原因以及10种解决方法汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue el-form一行里面放置多个el-form-item的实现
本文主要介绍了vue el-form一行里面放置多个el-form-item的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08