快捷導(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue使用pdf.js預(yù)覽pdf文件的方法
在頁(yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來(lái)通過(guò)本文給大家介紹vue使用pdf.js來(lái)進(jìn)行pdf預(yù)覽,需要的朋友可以參考下
2021-12-12
vue解決子組件樣式覆蓋問(wèn)題scoped deep
文章主要介紹了在Vue項(xiàng)目中處理全局樣式和局部樣式的方法,包括使用scoped屬性和深度選擇器（/deep/）來(lái)覆蓋子組件的樣式,作者建議所有組件必須使用scoped,以避免樣式?jīng)_突,對(duì)于父組件覆蓋子組件的樣式,作者推薦給子組件指定自定義類名
2025-01-01
Vue+Koa+MongoDB從零打造一個(gè)任務(wù)管理系統(tǒng)的詳細(xì)過(guò)程
這篇文章主要介紹了Vue+Koa+MongoDB從零打造一個(gè)任務(wù)管理系統(tǒng),本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
vue 取出v-for循環(huán)中的index值實(shí)例
今天小編就為大家分享一篇vue 取出v-for循環(huán)中的index值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種方法實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
uni-app進(jìn)階使用技巧分享
uni-app是一款基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開(kāi)發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下
2023-06-06
element用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例
本文主要介紹了element-ui的用腳本自動(dòng)化構(gòu)建新組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-09-09