我正在尝试在Node / Express应用程序中设置VueJS组件，我正在使用Gulp和Browserify来导入组件。
问题：
导入后我的组件没有正确导出，我尝试使用console.log进行调试，如下所示：import Home from './home.vue'; console.log(Home);并返回：
Object
_Ctor: VueComponent(options)
__proto__: Objec
查看一些工作示例（vue组件），它应该在此对象中显示类似：template, ready, data, etc的方法。
这就是为什么我认为我的组件没有正确导出，而且我的页面空白，<div id="app"></div>内没有任何内容加载。
以下是我的设置：
Gulpfile.js：
/**
* Module Dependencies
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
var vueify = require('vueify');
var browserify = require('browserify');
var es = require('event-stream');
var source = require('vinyl-source-stream');
var tap = require('gulp-tap');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');
gulp.task('scripts', function () {
var b = browserify({
entries: 'scripts/store.js',
debug: true,
transform: [vueify, babelify.configure({presets: ["es2015"], plugins: ["add-module-exports"]})]
});
return b.bundle()
.pipe(source('scripts/store-app.js'))
.pipe(buffer())
.on('error', gutil.log)
.pipe(gulp.dest('./public/'));
});
/* Sass task */
gulp.task('sass', function () {
gulp.src('scss/**.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat()
}))
.pipe(gulp.dest('public/stylesheets'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('public/stylesheets'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
/* Reload task */
gulp.task('bs-reload', function () {
browserSync.reload();
});
/* Prepare Browser-sync for localhost */
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(['css/*.css', 'js/*.js'], {
/*
I like to use a vhost, WAMP guide: https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp, XAMP guide: http://sawmac.com/xampp/virtualhosts/
*/
proxy: 'localhost:3010',
port: 5000,
notify: true,
/* For a static server you would use this: */
//server: {
// baseDir: './public'
//}
});
});
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: 'app.js',
ignore: [
'gulpfile.js',
'node_modules/'
]
})
.on('start', function () {
if (!called) {
called = true;
cb();
}
})
.on('restart', function () {
setTimeout(function () {
reload({ stream: false });
}, 1000);
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['sass', 'browser-sync'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['scripts/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['bs-reload']);
});
的package.json：
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"browserify": {
"transform": [
"vueify",
"babelify",
"browserify-shim"
]
},
"browserify-shim": {
"./js/vendor/jquery.js": "$",
"three": "global:THREE"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"bootstrap": "^4.0.0-alpha.4",
"browser-sync": "^2.17.5",
"gulp": "^3.9.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^2.2.0",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"tether": "^1.3.7",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0",
"vue": "^1.0.26",
"vue-hot-reload-api": "^2.0.6",
"vue-i18n": "^4.7.1",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vueify": "^8.7.0"
},
"dependencies": {
"basic-auth-connect": "^1.0.0",
"browserify": "^13.1.0",
"ejs": "^2.5.1",
"express": "^4.14.0",
"gulp-nodemon": "^2.2.1",
"i18n": "^0.8.3",
"nodemon": "^1.11.0",
"swagger-client": "^2.1.18",
"browserify-shim": "~3.2.0"
}
}
app.js
var Vue = require('vue');
var VueResource = require('vue-resource');
var VueRouter = require('vue-router');
// Components
import Home from '../home.vue';
console.log(Home);
Vue.use(VueRouter);
Vue.use(VueResource);
console.log(Vue);
var router = new VueRouter({
hashbang: true,
// history: true,
transitionOnLoad: true
});
router.map({
'/': { component: Home, name: 'root' }
});
var App = Vue.extend({
});
router.start(App, '#app');
home.vue
<script>
var Header = require('../header.vue');
export default {
data () {
},
ready () {
},
components: {
'app-header': Header
}
}
</script>
<template>
<div>
Home
</div>
</template>
index.html.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="bundle.js"></script>
</body>
</html>
备注：
1 - 如果我使用内联组件更改我的app.js，如下例所示，它可以工作：
var Foo = {
template: '<p>This is foo!</p>'
}
router.map({
'/': { component: Foo, name: 'root' },
});
我认为问题出在捆绑组件上的原因更多。为了捆绑这些组件并使这个结构工作，我使用了一些工具，如：Browserify，Babel，Vueify，Babelify。