执行gulp 后 提示Cannot find module 'vue' ?

Question

Error: Can't walk dependency graph: Cannot find module 'vue' from 'D:\xxxx\src\assets\js\main.js'

gulpfile.js 配置

const gulp = require('gulp');//引入gulp  
const htmlMin = require('gulp-htmlmin');//引入html压缩模块  
const autoprefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const babel = require('gulp-babel'), //引入es6转es5模块
    uglify = require('gulp-uglify') //引入js压缩模块
const connect = require('gulp-connect');
const webserver = require('gulp-webserver');
const proxy = require('http-proxy-middleware');
const sass = require('gulp-sass')(require('sass'));

// 方便路径管理
const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        entries: './src/assets/js/main.js',
        output: './assets/js/main.js',
        src: 'src/**/*.js',
        dest: 'dist'
    },
    scss: {
        src: 'src/**/*.scss',
        dest: 'dist'
    }
}

/** 
 * 创建任务，并命名任务名
 * 一个*表示所有文件，两个*表示所有目录
 */
const htmlCompress = () => {
    return gulp.src(path.html.src)
        .pipe(htmlMin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//压缩布尔属性的值
            removeEmptyAttributes: true,//删除所有空格作属性值
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
            minifyJS: true,//压缩页面JS
            minifyCSS: true //压缩页面css
        })).pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录 
}

const scssCompile = () => {
    return gulp.src(path.scss.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(path.scss.dest));
}
const cssCompress = () => {
    return gulp.src(path.css.src)
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}

const jsCompress = () => {
    // return gulp.src(path.js.src)
    //     .pipe(babel({
    //         presets: ['@babel/env'] //es6转es5
    //     }))
    //     .pipe(uglify()) //执行压缩
    //     .pipe(gulp.dest(path.js.dest))
    return browserify({
        entries: path.js.entries, // 入口文件路径，根据你的实际情况进行修改
        debug: true
    })
        .transform(babelify, {
            presets: ['@babel/preset-env']
        })
        .bundle()
        .pipe(source(path.js.output))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest));
}

const watch = () => {//监听文件，文件改变执行对应的任务
    gulp.watch(path.html.src, htmlCompress)
    gulp.watch(path.scss.src, scssCompile)
    gulp.watch(path.html.src, cssCompress)
    gulp.watch(path.js.src, jsCompress)
}

// const server = () => {
//     // 创建服务器
//     connect.server({
//         root: 'dist',//根目录
//         port: '2000',//端口号  
//         livereload: true //服务器热更新
//     })
// }

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //创建服务器
            port: '3000', //端口号
            host: 'xx.xx.xx.xx',
            open: '/dark-rankings.html', //默认打开路径
            livereload: true, //热更新
            middleware: [
                proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器
                    target: 'http://xx.xx.xx.xx',
                    changeOrigin: true
                })
            ]
        })).pipe(connect.reload())
}

/* 以对象形式导出 */
/* 同时运行多个任务 */
module.exports.default = gulp.series(gulp.parallel(htmlCompress, scssCompile, cssCompress, jsCompress, watch, createServer));

main.js中内容

import { createApp } from 'vue';

createApp({
  data() {
    return {
      showRule: false
    }
  },
  created() {
    console.log("created");
  },
  methods: {
    unfoldRule() {
      this.showRules = true;
    }
  }
}).mount('#app')
console.log("start watch");

vue 已经在 html 中通过cdn 引入

Answer 1

你自己捋捋,
在vue在html中通过cdn引入的话,
你咋能通过import { createApp } from 'vue'拿到呢?