Gulp Vueify-需要*.vue文件时返回空对象

我正在使用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

这是我的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

文件不会给我任何信息。谢谢你的帮助

这里是package.json，如果有帮助的话：

"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"
  ]
}

---

编辑/更新：仍未解决此问题。我删除了

gulp

，并通过命令行使用browserify/watchify、vueify和uglifyjs，而不是狼吞虎咽。但是，我仍然存在问题，包括

babelify

，因此我求助于使用

模块。导出

和

require（）

，而不是

导入

/

导出

。理想情况下，我可以使用gulp来解决所有这些问题，因此我保留问题，我可能会提供一笔奖金，因为我想解决这个问题。

问题很可能是您在package.json和gulp文件中都指定了browserify转换。在我的设置中，这将导致browserify执行babelify->vueify->babelify->vueify

---

这样做的结果有些令人困惑，几乎肯定不是你想要的。

可能与此有关：谢谢。我没有积极参与这个项目，但希望你的回答能帮助更多的人

"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"
  ]
}