快捷導(dǎo)航

vue項(xiàng)目配置國(guó)際化$t('')的介紹和用法示例

更新時(shí)間：2023年09月20日 09:11:49 作者：澈小飲

這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置國(guó)際化?$t('')的介紹和用法的相關(guān)資料,多語(yǔ)言和國(guó)際化現(xiàn)在已經(jīng)成為一個(gè)網(wǎng)站或應(yīng)用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下

前言

vue 項(xiàng)目中 $t('')直接在html中直接調(diào)用這個(gè)函數(shù) {{ $t('login.title') }}

$t是引入國(guó)際化后,掛到了Vue.prototype上的一個(gè)方法，接受一個(gè)字符串作為參數(shù)

<div class="title-container">
? ? ?<h3 class="title">
? ? ? ? ?{{ $t('login.title') }}
? ? ?</h3>
</div>
//---------$t('login.title') 我理解的意思是去當(dāng)前語(yǔ)言環(huán)境下login對(duì)象的title值

1.main.js中引入vue-i18n

// 國(guó)際化 這個(gè)文件是本地創(chuàng)建的 主要是獲取當(dāng)前語(yǔ)言環(huán)境和相應(yīng)的變量值
import i18n from './lang' 
new Vue({
? ? el: '#app',? ?
? ? i18n,
? ? render: h => h(App)
})

2.瀏覽器的語(yǔ)言環(huán)境不同，相應(yīng)設(shè)置不同的語(yǔ)言配置文件

// ./lang/index.js 
import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n'  //引入vue的國(guó)際化插件
import Cookies from 'js-cookie' //我這里需要，所以引入輕量級(jí)的處理cookies的js
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'     //本地創(chuàng)建的中文環(huán)境配置文件
import enLocale from './en'     //本地創(chuàng)建的英文環(huán)境配置文件
Vue.use(VueI18n) // 通過(guò)插件的形式掛載，通過(guò)全局方法?Vue.use()?使用插件
const messages = {
    en: {
? ? ? ? ...enLocale,
? ? ? ? ...elementEnLocale
? ? },
? ? zh: {
? ? ? ? ...zhLocale,
? ? ? ? ...elementZhLocale
? ? }
}
//獲取當(dāng)前語(yǔ)言環(huán)境，通過(guò)后臺(tái)返回的語(yǔ)言或者瀏覽器語(yǔ)言環(huán)境
export function getLanguage() {
? ? const chooseLanguage = Cookies.get('language')//取后臺(tái)設(shè)置的語(yǔ)言
? ? if (chooseLanguage) return chooseLanguage
    //如果后臺(tái)沒有返回語(yǔ)言則根據(jù)瀏覽器的語(yǔ)言環(huán)境返回語(yǔ)言變量
? ? const language = (navigator.language || navigator.browserLanguage).toLowerCase()
? ? const locales = Object.keys(messages)//獲取前端設(shè)置的所有語(yǔ)言
    //遍歷所有語(yǔ)言值組成的數(shù)組，匹配前端設(shè)置的語(yǔ)言能匹配到就返回改語(yǔ)言值
? ? for (const locale of locales) {
? ? ? ? if (language.indexOf(locale) > -1) {
? ? ? ? ? ? return locale
? ? ? ? }
? ? }
    //如果都沒匹配到就直接返回英文
? ? return 'en'
}
const i18n = new VueI18n({
    //語(yǔ)言標(biāo)識(shí) this.$i18n.locale 通過(guò)切換locale的值來(lái)實(shí)現(xiàn)語(yǔ)言切換
    //如：this.$i18n.locale='en' 直接切換成英文，僅限于配置了語(yǔ)言的一些變量
? ? locale: getLanguage(),//調(diào)的上邊這個(gè)函數(shù)
? ? messages              //上邊配置的語(yǔ)言標(biāo)識(shí)對(duì)應(yīng)的不同配置
})
export default i18n

3.創(chuàng)建不同語(yǔ)言標(biāo)識(shí)對(duì)應(yīng)的文件，以中文環(huán)境為例

// ./lang/index.js   創(chuàng)建文件 存儲(chǔ)語(yǔ)言對(duì)應(yīng)的一些變量  
export default {? 
?   login: {
? ? ? ? title: '登錄表單',
? ? },
? ? warning: '警告信息'
}