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