快捷導(dǎo)航

Vue項目引入translate.js國際化自動翻譯組件的方法

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

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

該組件優(yōu)點：

自動翻譯自動匹配本地語種
利于SEO 對搜索引擎友好
使用簡單直接引入使用即可
瞬時翻譯使用了緩存預(yù)加載

該組件缺點

正因為利于SEO 假設(shè)中譯英獲取DOM節(jié)點的時候還是中文
DOM不刷新 DOM內(nèi)容刷新時不會自動翻譯所以最好配合 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)控頁面動態(tài)渲染的文本進行自動翻譯
Vue.prototype.$translate = translate

3. 使用

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

大體邏輯是在 localStorage 里存入一個 val 根據(jù)這個 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('轉(zhuǎn)為中文')
    this.$translate.changeLanguage('chinese_simplified')
  }
  if (this.language == 'en') {
    console.log('轉(zhuǎn)為英文')
    this.$translate.changeLanguage('english')
  }
  this.$translate.execute() //進行翻譯
},

4.備注

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

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

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

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

vue 報錯的情況下可以如下操作

import Vue from 'vue'

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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