Vue項目引入translate.js國際化自動翻譯組件的方法
更新時間：2024年01月10日 08:30:55 作者：RyzenVega
這篇文章主要給大家介紹了關(guān)于Vue項目引入translate.js國際化自動翻譯組件的相關(guān)資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
建議 translate.js 配合 i18 使用
本文只介紹 translate.js 的引入和使用方式
無論什么庫 在翻譯上 都不會做到 （ 100%翻譯 && 100%準確 ） 所以不要吹毛求疵
官方文檔：translate.js 前端翻譯
該組件優(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路由配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
下面小編就為大家分享一篇vue編譯打包本地查看index文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue項目打包之后生成一個可修改IP地址的文件(具體操作),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖
ApexCharts 是一個功能強大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中數(shù)組加Key方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue-video-player 通過自定義按鈕組件實現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實現(xiàn)全屏切換效果,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題
這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue項目組件化工程開發(fā)實踐方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01