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

编辑/更新:仍然没有解决这个问题。我删除了 gulp 并通过命令行而不是 gulping 使用 browserify/watchify、vueify 和 uglifyjs。但是我仍然遇到问题，包括 babelify，所以我求助于使用 module.exports 和 require() 而不是 import/导出。理想情况下，我将能够为所有这些使用 gulp，所以我将按原样离开这个问题，我可能会提供赏金，因为我想解决这个问题。

Answer 1

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

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