vue-i18n web 前端國際化

vue-i18n是一個針對於vue的國際化插件，使用非常簡單

 

1. 下載包

npm install vue-i18n

 2、創建中、英文包文件

創建兩個文件，一個為zh.js代表中文，en.js代表英文，具體內容格式如下

zh.js文件　　　　　　　　　　　　　　　　　　　　　en.js文件

   

 

 

 

 

3、配置main.js

// 引入插件和語言包

import VueI18n from 'vue-i18n'

import zh from './i18n/langs/zh'

import en from './i18n/langs/en'

Vue.use(VueI18n)

 

//實例化vue-i18n

const i18n = new VueI18n({

    // 從本地存儲中取，如果沒有默認為中文，

    // 這樣可以解決切換語言后，沒記住選擇的語言，刷新頁面后還是默認的語言

    locale: localStorage.getItem('lang') || 'zh',

    messages: {

      'zh': zh, // 中文語言包

      'en': en // 英文語言包

    }

  })

// 將i18n實例掛載到vue上

 

 

4. 在組件中使用

 在組件中使用，主要有插值表達式中的使用，標簽屬性的使用,js中的使用

 

插值表達式中的使用

<span>{{$t('nav.home')}}</span>

標簽中屬性的使用

 <span v-text="$t('nav.home')"></span>

:label="$t('dataCenter.commonTools.fastApplication.applyForm.amount')"

: placeholder="$t('dataCenter.commonTools.fastApplication.applyForm.holderOccupation')"

js中的使用