关于Vue-cli 配合 vue-i18n的使用

在Vue-cli中，大多数我们需要的loader都已经集成了，但是确并不适用于所有场景。

i18n 还是需要一套专属的loader 的。

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

下载完成以后还需要配置，vue-cli 的webpack 配置看起来眼花缭乱，我现在把方法记录起来。

想要在.VUE 文件中使用<i18n></i18n> 的自定义标签，在 webpack.base.conf.js 中更改配置

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
//这是改动前 options 的 value 被cli 集合成一个对象了，


module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          vueLoaderConfig,
          loaders: {
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      }
   //改动后  

改好了以后,配置main.js

\\ main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',  // 设置默认使用语言
  messages: {
    en: {
    }
  }
})

new Vue({
  i18n, //挂载在根实例中
  el: '#app',
  render: h => h(App)
})

在组件中 : app.vue

<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>

<i18n> //i18n 标签储存供当前文件使用的翻译信息
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

<script>
export default {
  name: 'app',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      // 使用V-model 双向绑定 locale 
      //watch locale 的更改  调用根实例的i18n 注意点，要加$符号
      this.$i18n.locale = val
    }
  }
}
</script>