2017-10-17 132 views
0

給定一個laravel 5.5項目,我想使用vue-i18n插件的「單個文件組件」。 Documentation。這似乎是simpel,但我無法得到它的工作。vue-i18n laravel項目中的單個文件組件

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標籤。解決方案是添加文檔中的代碼。

我的問題:我在哪裏添加此代碼?

回答

0

要有人絆在了同樣的問題,我建議在文檔中的變化: https://github.com/kazupon/vue-i18n/pull/237

Laravel混有.vue文件它自己的規則。要添加vue-i18n-loader,請將以下內容添加到webpack.mix.js

mix.webpackConfig({ 
// ... 
module: { 
    rules: [ 
     { 
      // Rules are copied from [email protected] /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 
      } 
     }, 
     // ... 
    ] 
}, 
// ... 
}); 
相關問題