Vue項目引入translate.js國際化自動翻譯組件的方法
更新時間：2024年01月10日 08:30:55 作者：RyzenVega
這篇文章主要給大家介紹了關于Vue項目引入translate.js國際化自動翻譯組件的相關資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
建議 translate.js 配合 i18 使用
本文只介紹 translate.js 的引入和使用方式
無論什么庫 在翻譯上 都不會做到 （ 100%翻譯 && 100%準確 ） 所以不要吹毛求疵
官方文檔：translate.js 前端翻譯
該組件優(yōu)點：
- 自動翻譯 自動匹配本地語種
- 利于SEO 對搜索引擎友好
- 使用簡單 直接引入使用即可
- 瞬時翻譯 使用了緩存預加載
該組件缺點
- 正因為利于SEO 假設中譯英 獲取DOM節(jié)點的時候還是中文
- 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() //監(jiān)控頁面動態(tài)渲染的文本進行自動翻譯 Vue.prototype.$translate = translate
3. 使用
只保留關鍵代碼
大體邏輯是在 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('轉為中文')
this.$translate.changeLanguage('chinese_simplified')
}
if (this.language == 'en') {
console.log('轉為英文')
this.$translate.changeLanguage('english')
}
this.$translate.execute() //進行翻譯
},4.備注
在請求接口數(shù)據(jù)返回選然后 或者 路由切換后
會出現(xiàn)一半原始語種 一半翻譯語種的情況
此時可以在請求攔截器的相應攔截 和 路由后置守衛(wèi)里添加
this.$translate.execute() //進行翻譯
vue 報錯的情況下可以如下操作
import Vue from 'vue'
let vm = new Vue()
vm.$nextTick(() => {
vm.$translate.execute()
})總結
到此這篇關于Vue項目引入translate.js國際化自動翻譯組件的文章就介紹到這了,更多相關Vue引入translate.js組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue開發(fā)環(huán)境跨域訪問問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue3之axios跨域請求問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開內容并附上具體代碼,需要的朋友可以參考一下2021-11-11
一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)
組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于如何一步步用Vue.js創(chuàng)建一個組件的相關資料,需要的朋友可以參考下2022-12-12
本文將探討 Vue 版本升級后常見的不兼容問題,并提供相應的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了vue輪播圖插件vue-concise-slider的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue項目中對index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項目中對index.html中BASE_URL的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue+Java+Base64實現(xiàn)條碼解析的示例
這篇文章主要介紹了Vue+Java+Base64實現(xiàn)條碼解析的示例，幫助大家實現(xiàn)條碼解析，感興趣的朋友可以了解下2020-09-09
文章主要介紹了Vue3中的響應式數(shù)據(jù)處理機制,包括ref和reactive函數(shù)的使用,它們的區(qū)別,以及如何使用watch和watchEffect來監(jiān)聽數(shù)據(jù)變化,文章最后提到了Vue3的生命周期鉤子和自定義hooks的概念,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產品數(shù)據(jù)效果實例代碼
本篇文章主要介紹了vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產品效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07