快捷導(dǎo)航

Vue項(xiàng)目引入translate.js國(guó)際化自動(dòng)翻譯組件的方法

更新時(shí)間：2024年01月10日 08:30:55 作者：RyzenVega

這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引入translate.js國(guó)際化自動(dòng)翻譯組件的相關(guān)資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級(jí)功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

該組件優(yōu)點(diǎn)：

自動(dòng)翻譯自動(dòng)匹配本地語(yǔ)種
利于SEO 對(duì)搜索引擎友好
使用簡(jiǎn)單直接引入使用即可
瞬時(shí)翻譯使用了緩存預(yù)加載

該組件缺點(diǎn)

正因?yàn)槔赟EO 假設(shè)中譯英獲取DOM節(jié)點(diǎn)的時(shí)候還是中文
DOM不刷新 DOM內(nèi)容刷新時(shí) 不會(huì)自動(dòng)翻譯所以最好配合 i18 使用

1. 安裝

npm i i18n-jsautotranslate

2. 引入

在main.js內(nèi)

import translate from 'i18n-jsautotranslate'
translate.setUseVersion2() //設(shè)置使用v2.x 版本
translate.selectLanguageTag.show = false //是否顯示切換欄
translate.listener.start() //監(jiān)控頁(yè)面動(dòng)態(tài)渲染的文本進(jìn)行自動(dòng)翻譯
Vue.prototype.$translate = translate

3. 使用

只保留關(guān)鍵代碼

大體邏輯是在 localStorage 里存入一個(gè) val 根據(jù)這個(gè) val 去判斷要切換的語(yǔ)種

<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('轉(zhuǎn)為中文')
    this.$translate.changeLanguage('chinese_simplified')
  }
  if (this.language == 'en') {
    console.log('轉(zhuǎn)為英文')
    this.$translate.changeLanguage('english')
  }
  this.$translate.execute() //進(jìn)行翻譯
},

4.備注

在請(qǐng)求接口數(shù)據(jù)返回選然后或者路由切換后

會(huì)出現(xiàn)一半原始語(yǔ)種一半翻譯語(yǔ)種的情況

此時(shí)可以在請(qǐng)求攔截器的相應(yīng)攔截和路由后置守衛(wèi)里添加

this.$translate.execute() //進(jìn)行翻譯

vue 報(bào)錯(cuò)的情況下可以如下操作

import Vue from 'vue'

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

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目引入translate.js國(guó)際化自動(dòng)翻譯組件的文章就介紹到這了,更多相關(guān)Vue引入translate.js組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: