VUE i18n筆記

I18n基礎

kazupon/vue-i18n

Github狀態

Start 3k+，Fork <1k+

 

簡介

Vue I18n是Vue.js的國際化插件。 它可以輕鬆地將一些本地化功能集成到您的Vue.js應用程序中。

特性：

各種格式本地化

多元化

DateTime本地化

號碼本地化

基於組件的本地化

分量插值

後備本地化

 

項目體驗

 

使用評價

基礎功能

完美支持多語言。

項目使用

 

技術支持

 

 

框架資源

I18n

Github

https://github.com/kazupon/vue-i18n

官網

https://kazupon.github.io/vue-i18n/

Doc

https://kazupon.github.io/vue-i18n/

Demo

https://kazupon.github.io/vue-i18n/

Blog

 

 

Demo運行

npm install vue-cli -g

npm/yarn install

npm run dev

 

i18n集成

i18n Vue配置

集成到VUE工程(全局) ref

I18n集成

Vue工程

npm install vue-i18n

依賴

 

main.js

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({

  locale: 'zh', // 語言標識

  messages: {

    'zh': require('./locales/zh'),   // zh.json

    'en': require('./locales/en')

  }

})

new Vue({

  el: '#app',

  i18n,

  components: {App},

  template: '<App/>'

})

zh.json

{

  "lang": {

    "name": "I18n本地化"

  },

  "links": {

    "docs": "Documentation",

    "github": "GitHub"

  }

}

 

集成到VUE工程(單組價) ref

I18n集成

Vue工程

npm i --save-dev @kazupon/vue-i18n-loader

依賴

 

vue-loader.conf.js

const loaders = utils.cssLoaders({

  sourceMap: sourceMapEnabled,

  extract: isProduction,

  i18n: '@kazupon/vue-i18n-loader'

})

 

// i18n單組件支持

const i18n = '@kazupon/vue-i18n-loader' // 國際化

loaders.i18n = i18n

I18n的文本定義

// 全局

 

// 單組件

<i18n>

  {

  "zh": {

  "vd.ii.card.tv": "瀏覽器"

  },

  "en": {

  "vd.ii.card.tv": "Browser"

  }

  }

</i18n>

 

 

I18n的訪問

// html

<div>{{$t('lang.name')}}</div>

// JavaScript

this.$t('lang.name')