vue-i18n laravel项目中的单个文件组件

Question

给定一个laravel 5.5项目，我想使用vue-i18n插件的“单个文件组件”。 Documentation。这似乎是simpel，但我无法得到它的工作。

app.js

import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
    locale: 'en', 
    messages:  { 
     "en": { 
      "word1": "hello world!" 
     } 
    } 
}) 
Vue.component('test', require('./components/test.vue')); 
const app = new Vue({ i18n, el: '#apps'}); 

组件/ test.vue

<template> 
    {{ $t('word1') }} 
    {{ $t('word2') }} 
</template> 

<i18n> 
    { 
    "en": { 
    "word2": "does this work?" 
    } 
    } 
</i18n> 

<script> 
    export default { 
     name: "test" 

     data() { 
      return { 
       locale: 'en' 
      } 
     }, 

     mounted() {}, 

     watch: { 
      locale (val) { 
       this.$i18n.locale = val 
      } 
     } 
    } 
</script> 

WORD1被替换，但是WORD2不是。在vue文件中的i18n标签之间放置错误的语法，在编译文件时不会导致错误（npm run dev）。这是有道理的，因为我错过了：

taken from documentation

module.exports = { 
    // ... 
    module: { 
    rules: [ 
    ... 

据说这是在Webpack configration去。但是，laravel中的这个文件在哪里？我所能找到的只是webpack.mix.js，但是将这些代码放在那里，并没有太多的工作......并且使它mix.module.exports没有办法。搜索引导我到this topic，但我不确定他是否像我一样提问。

问题：未加载i18n标签。解决方案是添加文档中的代码。

我的问题：我在哪里添加此代码？

Answer 1

要有人绊在了同样的问题，我建议在文档中的变化： https://github.com/kazupon/vue-i18n/pull/237

Laravel混有.vue文件它自己的规则。要添加vue-i18n-loader，请将以下内容添加到webpack.mix.js

mix.webpackConfig({ 
// ... 
module: { 
    rules: [ 
     { 
      // Rules are copied from laravel-mix@1.5.1 /src/builder/webpack-rules.js and manually merged with the ia8n-loader. Make sure to update the rules to the latest found in webpack-rules.js 
      test: /\.vue$/, 
      loader: 'vue-loader', 
      exclude: /bower_components/, 
      options: { 
       // extractCSS: Config.extractVueStyles, 
       loaders: Config.extractVueStyles ? { 
        js: { 
         loader: 'babel-loader', 
         options: Config.babel() 
        }, 

        scss: vueExtractPlugin.extract({ 
         use: 'css-loader!sass-loader', 
         fallback: 'vue-style-loader' 
        }), 

        sass: vueExtractPlugin.extract({ 
         use: 'css-loader!sass-loader?indentedSyntax', 
         fallback: 'vue-style-loader' 
        }), 

        css: vueExtractPlugin.extract({ 
         use: 'css-loader', 
         fallback: 'vue-style-loader' 
        }), 

        stylus: vueExtractPlugin.extract({ 
         use: 'css-loader!stylus-loader?paths[]=node_modules', 
         fallback: 'vue-style-loader' 
        }), 

        less: vueExtractPlugin.extract({ 
         use: 'css-loader!less-loader', 
         fallback: 'vue-style-loader' 
        }), 

        i18n: '@kazupon/vue-i18n-loader', 
       } : { 
        js: { 
         loader: 'babel-loader', 
         options: Config.babel() 
        }, 

        i18n: '@kazupon/vue-i18n-loader', 
       }, 
       postcss: Config.postCss, 
       preLoaders: Config.vue.preLoaders, 
       postLoaders: Config.vue.postLoaders, 
       esModule: Config.vue.esModule 
      } 
     }, 
     // ... 
    ] 
}, 
// ... 
});