Question

我正在使用vue用打字稿编写一个小程序。用vueify转换并捆绑所有内容后，尝试在firefox中打开index.html时，出现错误“找不到模块'vue'”。

我的gulpfile.js：

test.empty

我的dist文件夹中的index.html：

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var vueify = require('vueify');
var babelify = require( 'babelify' );
var eslint = require('gulp-eslint');
var paths = {
    pages: ['*.html'],
    dist: ['./dist']
};


gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest(paths.dist));
});

gulp.task("default", gulp.series(gulp.parallel('copy-html'), function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['./src/index.ts'],
        extension: ['js', 'ts'],
        cache: {},
        packageCache: {},
        transform: [babelify, vueify]
    }).plugin(tsify)
        .transform(vueify)
        .transform('babelify', {extensions: [ '.js', '.ts']})
        .external('vue')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("./dist"));
}));

在我的dist文件夹中我bundle.js的一小部分：

<!doctype html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>

    <body>
        <div id="app"></div>
    </body>
    <script src="bundle.js"></script>

</html>

我的src文件夹中的index.ts：

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _vue = require("vue");

var _vue2 = _interopRequireDefault(_vue);

var _componentsHelloVue = require("./components/Hello.vue");

var _componentsHelloVue2 = _interopRequireDefault(_componentsHelloVue);

var _componentsMathVue = require("./components/Math.vue");

var _componentsMathVue2 = _interopRequireDefault(_componentsMathVue);

var v = new _vue2["default"]({
    el: "#app",
    template: "\n    <div>\n        Name: <input v-model=\"name\" type=\"text\"/> <br/>\n        <hello-component :name=\"name\" :initialEnthusiasm=\"1\" />\n        <p></p>\n        Math: \n        <input v-model=\"firstNumber\" type=\"Number\"/> \n            <select v-model=\"mathSymbol\" type=\"text\">\n                <option>+</option>\n                <option>-</option>\n            </select> \n         <input v-model=\"secondNumber\" type=\"Number\"/>\n        <math-component :firstNumber=\"firstNumber\" :secondNumber=\"secondNumber\" :mathSymbol=\"mathSymbol\"/>\n    </div>\n    ",
    data: { name: "World", firstNumber: 3, secondNumber: 4, mathSymbol: "+" },
    components: {
        HelloComponent: _componentsHelloVue2["default"],
        MathComponent: _componentsMathVue2["default"]
    }
});

},{"./components/Hello.vue":2,"./components/Math.vue":3,"vue":"vue"}]},{},[4])

使用vueify和绑定转换打字稿后出现未捕获的错误“找不到模块“ vue””

0 个答案: