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

我知道路由器正在工作，因为当我访问/test时，我看到了testing，但是控制台在运行console.log(Home);时记录{}。

下面是位于同一个文件夹中的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文件不会给我带来任何好处。谢谢你的帮助。

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

Edit/update：还没有解决这个问题。我删除了gulp，并通过命令行使用了浏览/监视、vueify和uglifyjs，而不是吞咽。但是，我仍然存在包括babelify在内的问题，所以我求助于使用module.exports和require()而不是import/export。理想情况下，我将能够使用吞咽的所有这一切，所以我留下的问题是，我很可能会提供一个赏金，因为我想解决这个问题。

Answer 1

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

结果有点混乱，几乎可以肯定不是你想要的。