vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue引入translate.js组件

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

作者:RyzenVega

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

建议 translate.js 配合 i18 使用

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

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

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

该组件优点:

该组件缺点

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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文