Vue如何基于vue-i18n實現(xiàn)多國語言兼容

更新時間：2020年07月17日 15:51:05 作者：亦碗粥

這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

vue中使用 vue-i18n 兼容多國語言

1.安裝：npm install vue-i18n --save-dev

2.在main.js文件中引入：

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通過插件的形式掛載，通過全局方法 Vue.use() 使用插件const i18n = new VueI18n({
 locale: 'zh', // 語言標識 //this.$i18n.locale // 通過切換locale的值來實現(xiàn)語言切換
 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（文件名字可自己定）然后在文件夾下建立兩個文件language-zh.js和language-en.js

你也可以創(chuàng)建的是兩個json文件如language-zh.json但是里面的格式也改成json格式

json 格式：

{
　　"lang":{
　　　　"home": "HHHHHHHHome",
　　　　"name": 'Chinese'
　　}
}

在main.js中引入這兩個文件

Vue.use(VueI18n) // 通過插件的形式掛載，通過全局方法 Vue.use() 使用插件const i18n = new VueI18n({
 locale: 'zh', // 語言標識 //this.$i18n.locale // 通過切換locale的值來實現(xiàn)語言切換
 messages: {
  'zh': require('./VueI18n/language-zh'), //引入language-zh.js language-en,js
  'en': require('./VueI18n/language-en')
 }
})

language-zh.js

language-en.js

4.在組件中開始使用

<template>
 <div class="content">
  <span>{{ $t('lang.home')}}</span>
  <span>{{ $t('lang.name')}}</span>
  <span @click="changeLaguages()">切換語言</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>

點擊切換語言這樣就完成了一個簡單的國際化。language-en.js language-zh.js這兩個文件是要翻譯的內容，通過$t(' ') 完成調用。

Ps:親測可用，只為備忘，僅供參考

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法
?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會根據(jù)控件類型自動選取正確的方法來更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧
2023-10-10
Vue3和Vue2的響應式原理
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實戰(zhàn)應用，系統(tǒng)的學習Vue生態(tài)體系，希望和大家共同成長，我們一起探討下Vue3和Vue2的響應式原理，那究竟什么是“響應式”，接下來跟著小編一起來學習吧
2023-05-05
axios請求二次封裝之避免重復發(fā)送請求
在做vue中大型項目的時候,官方推薦使用axios,但是原生的axios可能對項目的適配不友好,所以在工程開始的來封裝一下axios,下面這篇文章主要給大家介紹了關于axios請求二次封裝之避免重復發(fā)送請求的相關資料,需要的朋友可以參考下
2022-10-10
詳解vue axios二次封裝
這篇文章給大家分享了vue axios二次封裝的相關知識點等內容以及實例代碼，有興趣的朋友可以參考學習下。
2018-07-07
vue使用require.context實現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實現(xiàn)動態(tài)注冊路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue-router之nuxt動態(tài)路由設置的兩種方法小結
今天小編就為大家分享一篇vue-router之nuxt動態(tài)路由設置的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue-cli中安裝方法(圖文詳細步驟)
這篇文章主要介紹了vue-cli中安裝方法(圖文詳細步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
vue+element實現(xiàn)動態(tài)換膚的示例代碼
本文主要介紹了vue+element實現(xiàn)動態(tài)換膚的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
手動掛載Vue3.0組件到DOM節(jié)點的方法
在VUE應用中,經常會使用一些非vue實現(xiàn)的js庫,這些js庫可能要求外部傳入一些界面DOM節(jié)點,本文主要介紹了手動掛載Vue3.0組件到DOM節(jié)點的方法,感興趣的可以了解一下
2024-08-08
使用Vue自定義數(shù)字鍵盤組件(體驗度極好)
最近做 Vue 開發(fā)，因為有不少頁面涉及到金額輸入，產品老是覺得用原生的 input 進行金額輸入的話體驗很不好，于是自己動手寫了一個使用Vue自定義數(shù)字鍵盤組件，具體實現(xiàn)代碼大家參考下本文
2017-12-12