vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
前言
項(xiàng)目需要支持多語(yǔ)言，我們需要提取出項(xiàng)目中使用的靜態(tài)文本，使用語(yǔ)言包進(jìn)行管理， 當(dāng)切換語(yǔ)言設(shè)置的時(shí)候，可以自動(dòng)切換整個(gè)項(xiàng)目的文字顯示。
發(fā)現(xiàn)Vue項(xiàng)目中有對(duì)應(yīng)的組件 vue-i18n ，而且對(duì)項(xiàng)目的代碼修改不大，于是就使用了這個(gè)組件去修改項(xiàng)目中的代碼。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
安裝
// script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> // npm 安裝 npm install vue-i18n // yarn 安裝 yarn add vue-i18n
一般一個(gè)項(xiàng)目中使用都是通過(guò)安裝包的方式去運(yùn)行的， script 引入的較少。
使用
項(xiàng)目中配置i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
local: 'cn', // 設(shè)置語(yǔ)言
messages // 語(yǔ)言包
})
new Vue({
el: '#app',
...
i18n
})
// messages 大概的使用格式
{
cn: {
name: '名字'
},
us: {
name： 'Name'
}
}
使用i18n
// html 需要使用 {{}} 將 name包裝起來(lái)
{{$t('name')}}
// js
$t('name')
還有一些其他的用法，如：
- 針對(duì)不同語(yǔ)言，顯示不同的格式
- 如果在傳入自定義變量來(lái)控制顯示
- ... 具體的請(qǐng)參考官方文檔。
切換語(yǔ)言的話，可以使用內(nèi)置變量：
// 通過(guò)設(shè)置 locale 來(lái)切換語(yǔ)言 this.$i18n.locale = cn | us
語(yǔ)言包的生成 & 替換項(xiàng)目中原有的靜態(tài)文本
這一步最關(guān)鍵，抽離出所有出現(xiàn)的漢字，替換成 $t('xxx') ，維護(hù)多個(gè)版本的語(yǔ)言文件
語(yǔ)言包這邊是這么處理的，項(xiàng)目下新增一個(gè)目錄languages
--languages
--lib
-- cn.js // 中文語(yǔ)言包
-- us.js // 英文語(yǔ)言包
-- .. // 其他語(yǔ)言，暫未實(shí)踐
-- index.js // 導(dǎo)出語(yǔ)言包
cn.js
export default {
common: {
message: '消息'
},
xxx: {
}
}
us.js
export default {
common: {
message: 'Messages'
},
xxx: {
}
}
index.js
import cn from './lib/cn.js'
export default {
cn,
us
}
替換文本
<template>
...
<div>{{$t('message')}}</div>
...
</template>
問(wèn)題
- 不同的語(yǔ)言，格式不同，長(zhǎng)度不同，可能需要調(diào)整項(xiàng)目的樣式，以保正常
- 對(duì)于一個(gè)已經(jīng)在使用的項(xiàng)目，生成語(yǔ)言包這一步工作量大，浪費(fèi)時(shí)間
- 沒(méi)有考慮如果是否需要?jiǎng)討B(tài)的加載語(yǔ)言包，而非初始的加載所有的語(yǔ)言包
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- vue.js國(guó)際化 vue-i18n插件的使用詳解
- vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼
- vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開(kāi)發(fā)實(shí)現(xiàn)過(guò)程
- vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
- 使用vue 國(guó)際化i18n 實(shí)現(xiàn)多實(shí)現(xiàn)語(yǔ)言切換功能
- vue使用i18n實(shí)現(xiàn)國(guó)際化的方法詳解
- Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
- vue項(xiàng)目實(shí)現(xiàn)國(guó)際化的基本思路與詳細(xì)步驟
相關(guān)文章
element組件中自定義組件的樣式不生效問(wèn)題(vue scoped scss無(wú)效)
這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問(wèn)題(vue scoped scss無(wú)效)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue使用混入定義全局變量、函數(shù)、篩選器的實(shí)例代碼
本文主要是給大家分享利用混入mixins來(lái)實(shí)現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點(diǎn)是ide會(huì)有方法、變量、篩選器提示。對(duì)vue中 利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識(shí)感興趣的朋友，跟隨小編一起看看吧2019-07-07
Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu)教程詳解
新建項(xiàng)目的時(shí)候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護(hù)是很重要。這篇文章主要介紹了Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
我們有時(shí)候會(huì)碰到這種情況，需要連續(xù)發(fā)送兩個(gè)請(qǐng)求，第二個(gè)請(qǐng)求需要用第一個(gè)請(qǐng)求的某個(gè)返回值作為參數(shù)來(lái)作為第二個(gè)請(qǐng)求的請(qǐng)求參數(shù)，這篇文章主要介紹了vue請(qǐng)求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06
vue3響應(yīng)式原理之Ref用法及說(shuō)明
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+express+Socket實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了Vue+express+Socket實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03