vue-i18n Einzeldatei-Komponente in Laravel-Projekt

Question

Gegeben ein Laravel 5.5-Projekt, ich möchte die "Single-File-Komponente" des Vue-i18n-Plugin verwenden. Documentation. Es scheint simpel, aber ich kann es nicht zur Arbeit bringen.

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'}); 

components/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 ersetzt wird jedoch word2 nicht. Das Einfügen einer fehlerhaften Syntax zwischen den i18n-Tags in der Vue-Datei führt NICHT zu einem Fehler beim Kompilieren der Dateien (npm run dev). Dies macht Sinn, weil ich das bin fehlt:

taken from documentation

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

Dies soll in der Webpack configration gehen. Aber, wo ist diese Datei in Laravel? Alles, was ich finden kann, ist das webpack.mix.js, aber diesen Code dort zu platzieren, tut nicht viel ... Auch macht es mix.module.exports nicht den Trick. Die Suche führte mich zu this topic, aber ich bin mir nicht sicher, ob er genauso fragt wie ich.

Das Problem: die i18n-Tags sind nicht geladen. Die Lösung besteht darin, den Code aus der Dokumentation hinzuzufügen.

Meine Frage: Wo füge ich diesen Code hinzu?

Answer 1

Für jeden auf dem gleichen Problem zu stolpern, schlug ich eine Veränderung in der Dokumentation: https://github.com/kazupon/vue-i18n/pull/237

Laravel mix seine eigenen Regeln für .vue Dateien. Um die vue-i18n-loader hinzuzufügen, fügen Sie die folgenden 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 
      } 
     }, 
     // ... 
    ] 
}, 
// ... 
});