從安裝到使用詳解vue項(xiàng)目中i18n(vue-i18n)實(shí)現(xiàn)國(guó)際化的完整指南
1、國(guó)際化介紹
國(guó)際化（Internationalization，通?？s寫(xiě)為"i18n"）是指設(shè)計(jì)和開(kāi)發(fā)軟件應(yīng)用程序，使其能夠輕松地適應(yīng)不同的語(yǔ)言、文化和地區(qū)的需求。國(guó)際化不僅僅涉及將文字翻譯成其他語(yǔ)言，還包括調(diào)整日期、時(shí)間、貨幣格式，以及考慮不同文化中的布局、顏色和圖標(biāo)等因素。通過(guò)國(guó)際化，開(kāi)發(fā)人員可以使其應(yīng)用程序更易于被全球用戶理解和接受，從而擴(kuò)大應(yīng)用程序的市場(chǎng)和影響力。使用的基本思路定義如下：
- 定義語(yǔ)言包：需要幾種語(yǔ)言展示，就定義幾個(gè)語(yǔ)言包
- 創(chuàng)建對(duì)象，對(duì)語(yǔ)言包進(jìn)行整合，對(duì)象的 key 為語(yǔ)言包的引用，值為語(yǔ)言包對(duì)象
- 創(chuàng)建 vue-i18n 類的對(duì)象，同時(shí)為其 messages 屬性為第二步創(chuàng)建的對(duì)象，為其 locale 屬性賦值為第二步中語(yǔ)言對(duì)象對(duì)應(yīng)的 key
- 再創(chuàng)建 Vue 實(shí)例對(duì)象時(shí)，掛載 vue-i18n 類的對(duì)象
- 第三方庫(kù)的國(guó)際化配置，如 element組件庫(kù)
2、插件的試用版本介紹
vue-i18n 作為國(guó)際化插件，它主要有兩個(gè)版本：v8 和 v9。v8 版本適用于 Vue2 框架，v9 版本適用于 Vue3 框架。具體區(qū)別可以查看 官網(wǎng) ，以下內(nèi)容均在 Vue3 中使用。
3、在vue項(xiàng)目安裝并組合語(yǔ)言包
安裝插件 vue-i18n
可以使用 npm 或 yarn 進(jìn)行安裝：
// npm 安裝 npm install vue-i18n // 或者 // yarn 安裝 yarn add vue-i18n
定義和組合語(yǔ)言包
在項(xiàng)目中首先創(chuàng)建語(yǔ)言包文件夾i18n，在下面創(chuàng)建一個(gè)lang.js文件和存放需要的語(yǔ)言包；例如創(chuàng)建zh.json和en.json兩個(gè)語(yǔ)言，鍵名是自定義的，中英文是的一樣的，需要幾種語(yǔ)言就定義幾個(gè)對(duì)象，后面會(huì)在組件中使用。 先定義常用的語(yǔ)言包，列如常用的兩個(gè)語(yǔ)言包：中文（zh.json）English(en.json)。(如圖，圖中顯示的是三個(gè)語(yǔ)言)
常用語(yǔ)言包的定義如下見(jiàn)代碼
中文：zh_cn.json
{
"auto": "系統(tǒng)",
"calendar": {
"cancel": "取消",
"confirm": "確定",
"empty": "清空",
"sevenDaysAgo": "近七天",
"submit": "提交",
"thirtyDaysAgo": "近三十天",
"threeDaysAgo": "近三天",
"login": "登錄"
}
}
英文：en_cn.json
{
"auto": "System",
"calendar": {
"cancel": "Cancel",
"confirm": "OK",
"empty": "Clear",
"sevenDaysAgo": "近七天",
"submit": "Submit",
"thirtyDaysAgo": "Last 30 days",
"threeDaysAgo": "Nearly three days",
"login": "Login"
}
}注意：在語(yǔ)言環(huán)境定義中，我們使用的是key:value的形式，兩個(gè)語(yǔ)言文件里面的key必須保持一致
引入插件并創(chuàng)建 i18n 實(shí)例，組合語(yǔ)言包對(duì)象：
在當(dāng)前文件夾中的index.js文件中將我們的語(yǔ)言包對(duì)象組合并后續(xù)使用
import { createI18n } from 'vue-i18n'
import ZH from './zh_CN.json'
import EN from './en_US.json'
import ES from './es_US.json'
const messages = {
zh_CN: { ...ZH },
en_US: { ...EN },
es_US: { ...ES }
}
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale:'',
messages
})
/**
* 可以是請(qǐng)求后臺(tái)接口獲取語(yǔ)言包或者本地的(......為自定義邏輯)
* @param type
* @returns {Promise}
*/
const getLang=(lang)=>{
// 將選擇的語(yǔ)言存儲(chǔ)vuex
localStorage.setItem('lang', lang)
// 轉(zhuǎn)換語(yǔ)言類型并賦值i18n,按照自己頁(yè)面定義的值轉(zhuǎn)換為想要的數(shù)據(jù)
let language=lang=='中文'?'zh_CN':lang=='English'?'en_US':'es_US'
i18n.global.locale.value = language;
// 如果調(diào)用后端接口請(qǐng)自己寫(xiě)邏輯
......
i18n.global.locale.value = language;
}
// 導(dǎo)出getLang
export {getLang}
export default i18n
注意：在創(chuàng)建實(shí)例時(shí)，一定要將 legacy 屬性設(shè)置為 false，因?yàn)?legacy 默認(rèn)為 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要將此屬性手動(dòng)設(shè)置為 false。
4、將i18n文件 掛載到實(shí)例對(duì)象
在項(xiàng)目的主文件：main.js 中引入并掛載到app實(shí)例文件中
import { createApp } from 'vue'
//引入語(yǔ)言包文件
import i18n from './i18n/index'
import {getLang} from '@/i18n/index'
// 創(chuàng)建app實(shí)例并掛載
const app = createApp(App)
.use(i18n)
// 全局掛載語(yǔ)言改變函數(shù)
app.config.globalProperties.$getLang = getLang
app.mount('#app')5、在App.vue中判斷當(dāng)前語(yǔ)言
created(){
let langType = localStorage.getItem('lang')
// let type=langType=='中文'?'zh_CN':langType=='English'?'en_US':'es_US'
this.$getLang(langType ? langType : '中文')
},
6、在組件中使用
html文件中使用
// 沒(méi)有使用國(guó)際化語(yǔ)言之前
<el-button class="buttons" style="width:100%;" type="primary" @click="submitLongin">
登錄
</el-button>
//使用國(guó)際化語(yǔ)言之后
<el-button class="buttons" style="width:100%;" type="primary" @click="submitLongin">
{{ $t('calendar.login') }}
</el-button>js或者ts文件中使用
// js文件中沒(méi)有使用國(guó)際化之前
// 如：提示信息的國(guó)際化
if (ruleForm.name.length == 0 || ruleForm.pass.length == 0) {
ElMessage.error('請(qǐng)正確輸入用戶名或者密碼')
return
}
//js文件中使用國(guó)際化之后
//首先在js引入中語(yǔ)言包并定義js使用的變量
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
//具體使用
if (ruleForm.name.length == 0 || ruleForm.pass.length == 0) {
ElMessage.error(t('message.pleaseUserOrPassword')
return
}
畫(huà)面上規(guī)劃切換語(yǔ)言切換的文字或者按鈕或者圖標(biāo)
點(diǎn)擊執(zhí)行語(yǔ)言切換：想要切換語(yǔ)言時(shí)，修改 locale 屬性就可以了。（我這里是登錄畫(huà)面切換的）
<!-- 多語(yǔ)言 -->
<div class="language">
<div v-for="(item, index) in languageList" :key="index" :class="langIndex==index?'language-item':'language-item2 language-item'" @click="changeLanguage(index)">
<img class="icon" src="../../assets/language/china.png" alt="china" v-if="index==0"/>
<img class="icon" src="../../assets/language/MG.png" alt="china" v-if="index==1"/>
<img class="icon" src="../../assets/language/MXG.png" alt="china" v-if="index==2"/>
<span class="text">{{item}}</span>
</div>
</div>// js中引入
import {getLang} from '@/i18n/index'
// 定義多語(yǔ)言
const langIndex = ref() // 當(dāng)前選擇的語(yǔ)言
let langTypes = ["中文", "English", "espa?ol"]
let languageList = computed(() => {
return ["中文", "English", "espa?ol"]
})
// 多語(yǔ)言切換
const changeLanguage = (index) => {
langIndex.value = index
// localStorage.setItem('langIndex',langIndex)
let type = langTypes[index];
getLang(type) // 調(diào)用全局方法改變語(yǔ)言
}
到此這篇關(guān)于從安裝到使用詳解vue項(xiàng)目中i18n(vue-i18n)實(shí)現(xiàn)國(guó)際化的完整指南的文章就介紹到這了,更多相關(guān)vue i18n國(guó)際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue項(xiàng)目實(shí)現(xiàn)i18n國(guó)際化多語(yǔ)言切換方案實(shí)踐
- Vue3?接入?i18n?實(shí)現(xiàn)國(guó)際化多語(yǔ)言案例分析
- vue2+element-ui使用vue-i18n進(jìn)行國(guó)際化的多語(yǔ)言/國(guó)際化詳細(xì)教程
- 組件庫(kù)中使用 vue-i18n 國(guó)際化的案例詳解
- Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
- vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
- vue使用vue-i18n實(shí)現(xiàn)國(guó)際化的實(shí)現(xiàn)代碼
- vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
相關(guān)文章
vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄
這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
vue.js通過(guò)路由實(shí)現(xiàn)經(jīng)典的三欄布局實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue.js通過(guò)路由實(shí)現(xiàn)經(jīng)典的三欄布局，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁(yè)面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03
Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤按鍵監(jiān)聽(tīng))
本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則（rules）進(jìn)行網(wǎng)絡(luò)請(qǐng)求校驗(yàn)的方法,以及如何通過(guò)formRef引用表單對(duì)象并進(jìn)行鍵盤按鍵監(jiān)聽(tīng),感興趣的朋友跟隨小編一起看看吧2024-11-11
vue3項(xiàng)目引入pinia報(bào)錯(cuò)的簡(jiǎn)單解決
這篇文章主要介紹了vue3項(xiàng)目引入pinia報(bào)錯(cuò)的簡(jiǎn)單解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02