vue實(shí)現(xiàn)網(wǎng)頁(yè)語(yǔ)言國(guó)際化切換
一、基本步驟
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依賴(lài)收集引發(fā)的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值，感興趣的同學(xué)可以借鑒閱讀2023-06-06
Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大
這篇文章主要介紹了Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
巧用Vue.js+Vuex制作專(zhuān)門(mén)收藏微信公眾號(hào)的app
這篇文章主要為大家詳細(xì)介紹了vue自定義指令三步如何實(shí)現(xiàn)數(shù)據(jù)拉取更新,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無(wú)法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析
在Vue項(xiàng)目中,Markdown文檔的使用越來(lái)越普遍,因此在Vue中如何進(jìn)行Markdown文檔展示與解析也成為了一個(gè)熱門(mén)話(huà)題,本文將介紹如何使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue實(shí)現(xiàn)用戶(hù)沒(méi)有登陸時(shí),訪(fǎng)問(wèn)后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶(hù)沒(méi)有登陸時(shí)，訪(fǎng)問(wèn)后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面,定義路由的時(shí)候配置屬性，這里使用needLogin標(biāo)記訪(fǎng)問(wèn)頁(yè)面是否需要登錄，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)觸底判斷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06