Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容
更新時(shí)間：2020年07月17日 15:51:05 作者：亦碗粥
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
vue中使用 vue-i18n 兼容多國(guó)語(yǔ)言
1.安裝：npm install vue-i18n --save-dev
2.在main.js文件中引入：
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通過(guò)插件的形式掛載，通過(guò)全局方法 Vue.use() 使用插件const i18n = new VueI18n({
locale: 'zh', // 語(yǔ)言標(biāo)識(shí) //this.$i18n.locale // 通過(guò)切換locale的值來(lái)實(shí)現(xiàn)語(yǔ)言切換
messages: {
'zh': require('./VueI18n/language-zh'), //
'en': require('./VueI18n/language-en')
}
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
3.在src下新建文件夾VueI18n（文件名字可自己定） 然后在文件夾下建立兩個(gè)文件language-zh.js和language-en.js
你也可以創(chuàng)建的是兩個(gè)json文件 如language-zh.json但是里面的格式也改成json格式
json 格式：
{
"lang":{
"home": "HHHHHHHHome",
"name": 'Chinese'
}
}
在main.js中引入這兩個(gè)文件
Vue.use(VueI18n) // 通過(guò)插件的形式掛載，通過(guò)全局方法 Vue.use() 使用插件const i18n = new VueI18n({
locale: 'zh', // 語(yǔ)言標(biāo)識(shí) //this.$i18n.locale // 通過(guò)切換locale的值來(lái)實(shí)現(xiàn)語(yǔ)言切換
messages: {
'zh': require('./VueI18n/language-zh'), //引入language-zh.js language-en,js
'en': require('./VueI18n/language-en')
}
})
language-zh.js
language-en.js
4.在組件中開(kāi)始使用
<template>
<div class="content">
<span>{{ $t('lang.home')}}</span>
<span>{{ $t('lang.name')}}</span>
<span @click="changeLaguages()">切換語(yǔ)言</span>
<!-- <span v-if="lang==='zh'" @click="changezh" style="display:block" class="color">中文</span> -->
<!-- <span v-else ="lang==='en'" @click="changeen" style="display:block">english</span> -->
</div>
</template>
<script>
export default {
data () {
return {
lang: 'zh'
}
},
methods: {
changeLaguages () {
console.log(this.$i18n.locale)
let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
this.$i18n.locale = lang
}
// changezh () {
// this.lang = '中文'
// this.$i18n.locale = 'zh'
// },
// changeen () {
// this.lang = 'english'
// this.$i18n.locale = 'en'
// }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/scss/index.scss';
</style>
點(diǎn)擊切換語(yǔ)言 這樣就完成了一個(gè)簡(jiǎn)單的國(guó)際化。language-en.js language-zh.js這兩個(gè)文件是要翻譯的內(nèi)容，通過(guò)$t(' ') 完成調(diào)用。
Ps:親測(cè)可用，只為備忘，僅供參考
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧2023-10-10
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長(zhǎng)，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來(lái)跟著小編一起來(lái)學(xué)習(xí)吧2023-05-05
axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求
在做vue中大型項(xiàng)目的時(shí)候,官方推薦使用axios,但是原生的axios可能對(duì)項(xiàng)目的適配不友好,所以在工程開(kāi)始的來(lái)封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章給大家分享了vue axios二次封裝的相關(guān)知識(shí)點(diǎn)等內(nèi)容以及實(shí)例代碼，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)
今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue-cli中安裝方法(圖文詳細(xì)步驟)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼
本文主要介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)換膚的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法
在VUE應(yīng)用中,經(jīng)常會(huì)使用一些非vue實(shí)現(xiàn)的js庫(kù),這些js庫(kù)可能要求外部傳入一些界面DOM節(jié)點(diǎn),本文主要介紹了手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法,感興趣的可以了解一下2024-08-08
使用Vue自定義數(shù)字鍵盤組件(體驗(yàn)度極好)
最近做 Vue 開(kāi)發(fā)，因?yàn)橛胁簧夙?yè)面涉及到金額輸入，產(chǎn)品老是覺(jué)得用原生的 input 進(jìn)行金額輸入的話 體驗(yàn)很不好，于是自己動(dòng)手寫了一個(gè)使用Vue自定義數(shù)字鍵盤組件，具體實(shí)現(xiàn)代碼大家參考下本文2017-12-12