vue-i18n composant de fichier unique dans le projet laravel

Question

Étant donné un projet laravel 5.5, je veux utiliser le "composant de fichier unique" du plugin vue-i18n. Documentation. Il semble simpel, mais je ne peux pas le faire fonctionner.

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

composants/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 est remplacé, mais mot2 est pas. Le fait de placer une mauvaise syntaxe entre les balises i18n dans le fichier vue n'entraîne PAS d'erreur lors de la compilation des fichiers (npm run dev). Cela est logique, parce que je suis absent le:

taken from documentation

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

Ceci est censé aller dans le Webpack configration. Mais, où est ce fichier en laravel? Tout ce que je peux trouver, c'est le webpack.mix.js, mais en plaçant ce code là-dedans, ça ne fait pas grand-chose ... Le faire aussi mix.module.exports ne fait pas l'affaire. La recherche m'a conduit à this topic, mais je ne suis pas sûr s'il demande la même chose que moi.

Le problème: les étiquettes i18n ne sont pas chargées. La solution consiste à ajouter le code de la documentation.

Ma question: Où puis-je ajouter ce code?

Answer 1

Pour quelqu'un trébucher sur le même problème, je propose un changement dans la documentation: https://github.com/kazupon/vue-i18n/pull/237

mélange Laravel a ses propres règles pour les fichiers .VUE. Pour ajouter le vue-i18n-loader, ajoutez ce qui suit à 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 
      } 
     }, 
     // ... 
    ] 
}, 
// ... 
});