Vue-i18n安裝

• npm install vue-i18n --save

Vue-i18n的使用

• 在入口main.js文件配置使用

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);
/*---------基本使用-----------*/
const i18n = new VueI18n({
  locale: 'CN',    // 語(yǔ)言標(biāo)識(shí)
  messages : {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    cn: {
      message: {
        hello: '你好、世界'
      }
    }
  }
})
/*---------使用語(yǔ)言包-----------*/
const i18n = new VueI18n({
  locale: 'CN',    // 語(yǔ)言標(biāo)識(shí)
  messages: {
    'CN': require('./assets/common/lang/cn'),   // 中文語(yǔ)言包
    'EN': require('./assets/common/lang/en')    // 英文語(yǔ)言包
  },
})

/*---------語(yǔ)言包內(nèi)部語(yǔ)法star-----------*/
export const  message = {
      language:'語(yǔ)言',
      hello: '你好,世界'
}
/*---------語(yǔ)言包內(nèi)部語(yǔ)法end-----------*/

/*---------掛載全局使用-----------*/
new Vue({
  el: '#app',
  i18n,
  router,
  template: '<App/>',
  components: { App }
})

/*---------vue組件模板的使用-----------*/
 <template>
        <p>{{ $t("message.hello") }}</p>
    </template>

單獨(dú)組件的使用

• 在單個(gè)vue組件中使用，要用到i18n自定義塊，需要配置webpack文件webpack.base.conf.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      },
      // ...
    ]
  },
  // ...
}

• 示例

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "你好,世界！"
  }
}
</i18n>

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>ja</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>