Uncaught error 'Не удается найти модуль "vue" "после преобразования машинописи с помощью vueify и связывания - PullRequest
Новая
       320

Uncaught error 'Не удается найти модуль "vue" "после преобразования машинописи с помощью vueify и связывания

0 голосов
/ 28 мая 2019

Я пишу небольшую программу на машинописном языке, используя vue.После преобразования всего с помощью vueify и связывания его я получаю сообщение об ошибке «Не удается найти модуль 'vue'" при попытке открыть index.html в Firefox.

Мой gulpfile.js: 

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"));
}));

Мой index.html в моей папке dist: 

<!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>

небольшая часть моего bundle.js в моей папке dist: 

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])

Мой index.ts в моей папке src:

import Vue from "vue";
import HelloComponent from "./components/Hello.vue";
import MathComponent from "./components/Math.vue";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        Name: <input v-model="name" type="text"/> <br/>
        <hello-component :name="name" :initialEnthusiasm="1" />
        <p></p>
        Math: 
        <input v-model="firstNumber" type="Number"/> 
            <select v-model="mathSymbol" type="text">
                <option>+</option>
                <option>-</option>
            </select> 
         <input v-model="secondNumber" type="Number"/>
        <math-component :firstNumber="firstNumber" :secondNumber="secondNumber" :mathSymbol="mathSymbol"/>
    </div>
    `,
    data: { name: "World", firstNumber:3, secondNumber:4, mathSymbol:"+"},
    components: {
        HelloComponent,
        MathComponent
    }
});
...