Question

我正在使用Gulp / Browserify / Vueify构建应用程序以导入文件，并且我遇到了Vueify问题。每当我导入<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="first_name">First Name</label> <input class="w3-input" type="text" name="first_name" id="first_name"> <label for="last_name">Last Name</label> <input class="w3-input" type="text" name="last_name" id="last_name">文件时，我都会得到一个空对象.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时会记录{}

以下是同一文件夹中的 Home.vue ：

console.log(Home);

这是我的 gulpfile.js ;

<style lang="sass">

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

我在编译期间或运行时没有收到任何错误，但导入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')) });文件并没有给我任何帮助。谢谢你的帮助。

如果有帮助， package.json ：

.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" ] }并通过命令行使用browserify / watchify，vueify和uglifyjs而不是gulping。但是，我仍然遇到包括gulp在内的问题，因此我暂时使用babelify和module.exports代替require() / import。理想情况下，我可以使用gulp进行所有这一切，所以我将问题保留原样，我可能会提供赏金，因为我想解决这个问题。

Answer 1

问题可能是你在package.json和gulp文件中指定了browserify转换。在我的设置中，这导致浏览器执行babelify - ＆gt; vueify - ＆gt; babelify - ＆gt; vueify

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

Vueify - 要求* .vue文件返回空对象

1 个答案: