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

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

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

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

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

想要在.VUE 文件中使用 的自定义标签，在 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

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