vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換
更新時(shí)間：2021年11月29日 15:46:05 作者：SunFlower914
這篇文章介紹了vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一、基本步驟
1：安裝?yarn add vue-i18n
?在此路徑新建一個(gè).js文件：src/lang/index.js后：
?
2:導(dǎo)入
import VueI18n from 'vue-i18n'
3:注冊(cè)
import Vue from 'vue'
Vue.use(VueI18n)
4:實(shí)例化
const i18n=new VueI18n({
locale:'當(dāng)前語(yǔ)言的標(biāo)識(shí)'， // en:英文 zh:中文
messages:{
// 語(yǔ)言包
en:{
home:'home'
},
zh:{
home:'首頁(yè)'
}
}
})
5:暴露出去
export default? ?i18n
6:掛載到main.js
import i18n from '@/lang'
new Vue({
i18n
})
使用：<div>{{$t('home')}}</home>
二、在main.js中導(dǎo)入element-ui國(guó)際化語(yǔ)言配置
import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
三、新建一個(gè).vue文件通過(guò)按鈕實(shí)現(xiàn)語(yǔ)言切換
?注意：
this.$i18n.locale能獲取與設(shè)置當(dāng)前語(yǔ)言在js文件中使用國(guó)際化
四、實(shí)現(xiàn)網(wǎng)站菜單的國(guó)際化處理，需要在路由中引入
import i18n from '@/lang'后將i18n.t===this.$t
到此這篇關(guān)于vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE項(xiàng)目運(yùn)行npm install報(bào)錯(cuò)問(wèn)題以及解決
在運(yùn)行Vue項(xiàng)目時(shí)遇到npm安裝錯(cuò)誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無(wú)法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
本文給大家收藏整理了關(guān)于vue面試題匯總的一些知識(shí),需要的朋友可以參考下2018-03-03
vue中使用axios請(qǐng)求post接口發(fā)送兩次
這篇文章主要為大家介紹了vue中使用axios請(qǐng)求post接口,請(qǐng)求會(huì)發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue1.0和vue2.0的watch監(jiān)聽(tīng)事件寫(xiě)法詳解
今天小編就為大家分享一篇vue1.0和vue2.0的watch監(jiān)聽(tīng)事件寫(xiě)法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
下面小編就為大家分享一篇vue2 全局變量的設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue中iframe?結(jié)合?window.postMessage?實(shí)現(xiàn)跨域通信
window.postMessage()?方法可以安全地實(shí)現(xiàn)跨源通信，在一個(gè)項(xiàng)目的頁(yè)面中嵌入另一個(gè)項(xiàng)目的頁(yè)面，需要實(shí)現(xiàn)父子，子父頁(yè)面的通信，對(duì)Vue中iframe?結(jié)合?window.postMessage?實(shí)現(xiàn)跨域通信相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-12-12
解決echarts 一條柱狀圖顯示兩個(gè)值,類(lèi)似進(jìn)度條的問(wèn)題
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個(gè)值,類(lèi)似進(jìn)度條的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Vue開(kāi)發(fā)高德地圖應(yīng)用的最佳實(shí)踐
要在Web頁(yè)面中加入地圖，我推薦你使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)高德地圖應(yīng)用的最佳實(shí)踐,需要的朋友可以參考下2021-07-07
關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟
公司最近有微信公眾號(hào)的需求,那么微信登錄授權(quán)和如何使用WX-JSSDk實(shí)現(xiàn)分享等等肯定是最頭疼的問(wèn)題,這篇文章主要給大家介紹了關(guān)于在vue2中使用weixin-js-sdk的詳細(xì)步驟,需要的朋友可以參考下2024-07-07