Vueify - * .vueファイルを要求すると空のオブジェクトが返される

Question

Gulp/Browserify/Vueifyを使用してファイルをインポートするアプリケーションを作成していて、Vueifyで問題が発生しています。 .vueファイルをインポートするたびに、空のオブジェクト{}が表示されます。ここに私のルーターファイルは次のとおりです。

router.js

var Vue = require('vue') 
var VueRouter = require('vue-router') 

Vue.use(VueRouter) 

var router = new VueRouter() 

var Home = require('./Home.vue'); 

console.log(Home); 

router.map({ 
    '/':{ 
     component:Home 
    }, 
    '/test':{ 
     component:Vue.extend({template:'<div>testing</div>'}) 
    } 
}) 

export default router 

それはconsole.log(Home);

を実行したとき、私は私が/testを訪れたとき、私はtestingを見るので、ルータが動作している知っているが、コンソールログ{}ここにHome.vue同じフォルダ内の：

<style lang="sass"> 

</style> 
<template> 
    <div> 
     hello world! {{ msg }} 
    </div> 
</template> 
<script> 
    export default { 
     data(){ 
      return { 
       msg:'hello' 
      } 
     }, 
     ready(){ 
      console.log('ready') 
     } 
    } 
</script> 

ここに私のgulpfile.js;

var gulp = require('gulp'); 

var browserify = require('browserify'); 

var babelify = require('babelify'); 

var source = require('vinyl-source-stream'); 

var vueify = require('vueify'); 

var gutil = require('gulp-util'); 

gulp.task('js', function() { 

     return browserify('./src/js/index.js') 

      .transform(vueify).on('error',gutil.log) 

      .transform([babelify, { 
       presets: ["es2015"], 
       plugins: ['transform-runtime'] 
      }]).on('error',gutil.log) 

      .bundle() 

      .pipe(source('theme.js')) 

      .pipe(gulp.dest('js')) 

}); 

私は、コンパイル時にエラーを受け取っていないか、私はそれを実行すると、しかし.vueファイルをインポートすることは私に何かを与えるものではありません。助けてくれてありがとう。

"dependencies":{ 
    "vue": "^1.0.21", 
    "babel-runtime": "^5.8.0" 
}, 
"devDependencies": { 
    "babel-core": "^6.7.6", 
    "babel-plugin-transform-runtime": "^6.7.5", 
    "babel-preset-es2015": "^6.6.0", 
    "babelify": "^7.2.0", 
    "browserify": "^13.0.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-jshint": "^2.0.0", 
    "gulp-livereload": "^3.8.1", 
    "gulp-notify": "^2.2.0", 
    "gulp-plumber": "^1.1.0", 
    "gulp-sass": "^2.2.0", 
    "gulp-util": "^3.0.7", 
    "jshint": "^2.9.1", 
    "node-sass": "^3.4.2", 
    "vinyl-source-stream": "^1.1.0", 
    "vue-hot-reload-api": "^1.3.2", 
    "vue-resource": "^0.7.0", 
    "vue-router": "^0.7.13", 
    "vueify": "^8.3.9", 
    "vueify-insert-css": "^1.0.0", 
    "vuex": "^0.6.2" 
}, 
"browserify": { 
    "transform": [ 
    "vueify", 
    "babelify" 
    ] 
} 

編集/更新：まだこれを解決していないが、それは場合に役立ちます。ここ

はpackage.jsonです。私はgulpを削除し、貪欲ではなくコマンドラインを通してbrowserify/watchify、vueify、uglifyjsを使っています。しかし、まだbabelifyなどの問題があるので、import/exportの代わりにmodule.exportsとrequire()を使用しています。理想的には、私はこれのすべてのためにgulpを使用することができるので、私は問題を残している、私は可能性が高い私はこれを解決したいと思います。

Answer 1

この問題は、package.jsonとgulpファイルの両方でbrowserifyトランスフォームを指定している可能性があります。私の設定では、これは、babelify - > vueify - > babelify - > vueifyの実行をブラウジングにつなげます。

この結果は多少混乱していて、