Vue笔记04

最新推荐文章于 2024-10-27 12:43:25 发布

BlogY

最新推荐文章于 2024-10-27 12:43:25 发布

阅读量351

点赞数 1

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_45081813/article/details/113896786

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.插槽slot

1.概念

slot翻译为插槽，在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。

例子：移动网站中的导航栏。

移动开发中，几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件，比如nav-bar组件。一旦有了这个组件，我们就可以在多个页面中复用了。但是，每个页面的导航是一样的吗？No，我以京东M站为例在这里插入图片描述

2.slot的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot的基本使用</title>
</head>
<body>

<div id="app">
    <!--插入值:若有其他元素，将会替代插槽的默认值-->
    <cpn><button>我是插入slot的按钮</button></cpn>
    <br>
    <cpn><p>我是插入slot的p元素</p></cpn>
    <cpn><h5>我是插入slot的h5元素</h5></cpn>
    <br>
    <cpn></cpn>
    <cpn></cpn>
</div>


<template id="cpn">
    <div>
        <h3>我是子组件</h3>
        <!--定义默认值-->
        <slot><button>我是slot的默认值</button></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "Hello"
        },
        components:{
            cpn:{
                template: '#cpn',
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

我们平常使用组件，会导致组件的复用性不是很高,

比如我们使用cpn组件的时候想给他一些定制的东西，这是需要用到了slot 在这里插入图片描述
cpn里面添加的元素可以是多个，最后都会一起插入到插槽里
比如我们需要默认值时，可以在定义模板时留的slot里面可以定义默认值

3.具名插槽slot的使用

当我们的组件里有多个slot时，我们只想指定一个插槽插入值该怎么办？
在这里插入图片描述
发现，我们只想修改中间的值，发现全部都修改了，这时就需要使用具名slot了

使用具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <cpn><span slot="center">标题</span></cpn>
    <br>
    <cpn><button slot="left">返回</button></cpn>
    <br>
    <cpn><button>代替无名</button></cpn>
</div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <slot><span>无名</span></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn'
            }
        }
    })
</script>
</body>
</html>

4.编译作用域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--使用vue对象的数据，将会显示子组件-->
    <cpn v-show="isShow"></cpn>
    <cpn v-for="item in names"></cpn>
</div>


<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <p>我是内容, 哈哈哈</p>
        <!--使用子组件中的数据，不会显示按钮-->
        <button v-show="isShow">按钮</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        isShow: false
                    }
                }
            },
        }
    })
</script>

</body>
</html>

在这里插入图片描述

5.作用域插槽

这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

父组件替换插槽的标签，但是内容由子组件来提供。

我们先提一个需求：

子组件中包括一组数据，比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]

需要在多个界面进行展示：

某些界面是以水平方向一一展示的，

某些界面是以列表形式展示的，

某些界面直接展示一个数组

内容在子组件，希望父组件告诉我们如何展示，怎么办呢？

利用slot作用域插槽就可以了

在这里插入图片描述

我们想第二个和第三个，是以父组件传入的模板，和子组件的数据进行渲染的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <cpn></cpn>

    <br>
    <cpn>
        <!--目的是获取子组件中的pLanguages-->
        <template slot-scope="slot">
            <!--<span v-for="item in slot.data"> - {{item}}</span>-->
            <span>{{slot.data.join(' - ')}}</span>
        </template>
    </cpn>

    <br>
    <cpn>
        <!--目的是获取子组件中的pLanguages-->
        <template slot-scope="slot">
            <!--<span v-for="item in slot.data">{{item}} * </span>-->
            <span>{{slot.data.join(' * ')}}</span>
        </template>
    </cpn>
    <!--<cpn></cpn>-->
</div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
                    }
                }
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

二.模块化开发

1.CommonJS

在这里插入图片描述

2.export基本使用

在这里插入图片描述

3.导出函数或类

在这里插入图片描述

4.export default

在这里插入图片描述

5.import使用

在这里插入图片描述

三.webpack

1.什么是Webpack？

在这里插入图片描述

2.前端模块化

在这里插入图片描述

3.和grunt/gulp的对比

在这里插入图片描述

4.webpack安装

在这里插入图片描述

5.webpack的使用

准备工作:
我们创建如下文件和文件夹：没有package.json
在这里插入图片描述
文件和文件夹解析：

dist文件夹：用于存放之后打包的文件

src文件夹：用于存放我们写的源文件

main.js：项目的入口文件。具体内容查看下面详情。

mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。

index.html：浏览器打开展示的首页html

package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）

mathUtils.js文件中的代码：

function add(num1,num2) {
    return num1+num2;
}

function mul(num1,num2) {
    return num1*num2;
}

module.exports={
  add,mul
};

info.js文件中的代码：

export const name='wsy';
export const age=18;
export const heigh=1.88;

main.js文件中的代码：

const {add,mul} = require('./mathUtils.js');
console.log(add(10, 20));
console.log(mul(1, 20));

import {name,age,heigh} from "./info";
console.log(name);
console.log(age);
console.log(heigh);

JS文件打包

现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。

另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。

我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。

我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。（如何处理的，待会儿在原理中，我会讲解）

另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。

OK，如何打包呢？使用webpack的指令即可

进入到目录下

-o 代表打包输出文件，–mode选择版本模式，development 开发环境

webpack ./src/main.js -o ./dist/build.js --mode development
在这里插入图片描述

在index.html中使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/bunldle.js/main.js"></script>
</body>
</html>

在这里插入图片描述

6.webpack的配置

入口和出口
我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
当然可以，就是创建一个webpack.config.js文件

module.exports ={
    //入口：可以是字符串/数组/对象，这里我们入口只有一个。所以写一个字符串即可
    entry:'./src/main.js',
    //出口：通常是一个对象，里面至少包含两个重要属性，path和filename
    output:{
        path:'./dist', //注意：path通常是一个绝对路径
        filename:'build.js'
    }
};

直接执行webpack命令

出口的路径需要一个绝对路径在这里插入图片描述
这时需要node提供的工具

导入的变量需要依赖node的包在这里插入图片描述
执行npm init 生成package.json文件

如果packagr.json里面有依赖一些东西的话，执行npm install，在这里插入图片描述
然后执行webpack，就会生成build.js,然后index.html引入即可

或者配置并执行build命令

在这里插入图片描述

7.局部安装webpack

在这里插入图片描述
一般webpack打包我们只需要开发时打包，项目发布时不需要，所以后面带 --save-dev 开发时依赖，

npm install webpack@4.44.2 --save-dev

执行完生成一个目录，使用局部webpack时只需要执行目录下的./bin/webpack,启动webpack打包，但是我们在终端输入的webpack使用的都是全局webpack，使用这个局部webpack有两种方式，一种是直接运行目录下的webpack，在这里插入图片描述
生成开发依赖，webpack
另一种是我们使用npm run 参数的时候会先在局部webpack的脚步块找有没有这个参数，没有再去全局webpack找

比如：npm run test 会先来下面图片划圈的这里找，找不到再去全局寻找执行，在这里插入图片描述

8.webpack的loader

loader是webpack中一个非常核心的概念。

webpack用来做什么呢？

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。

但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。

那怎么办呢？给webpack扩展对应的loader就可以啦。

loader使用过程：

步骤一：通过npm安装需要使用的loader

步骤二：在webpack.config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

9.css文件处理

在这里插入图片描述
打包报错信息：这个错误告诉我们：加载normal.css文件必须有对应的loader。
css文件处理–css-loader

https://v4.webpack.docschina.org/concepts/

在webpack的官方中，我们可以找到如下关于样式的loader使用方法：

按照官方配置webpack.config.js文件

注意：配置中有一个style-loader，我们并不知道它是什么，所以可以暂时不进行配置。在这里插入图片描述

这里需要使用npm install css-loader css --save -dev

安装成功在这里插入图片描述
按照官方配置webpack.config.js文件

注意：配置中有一个style-loader，我们并不知道它是什么，所以可以暂时不进行配置。在这里插入图片描述
打开index.html,发现样式没生效

原因是css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中。这个时候，我们还需要一个style-loader帮助我们处理。在这里插入图片描述
安装style-loader

执行npm install style-loader --save-dev
注意：style-loader需要放在css-loader的前面。

疑惑：不对吧？按照我们的逻辑，在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理，为什么会将style-loader放在前面呢？

答案：这次因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。在这里插入图片描述

在这里插入图片描述
再次打包，运行成功！

10.less文件处理

在这里插入图片描述

需要一个loader 在这里插入图片描述

打开官网https://v4.webpack.docschina.org/loaders/

安装loader和添加配置在这里插入图片描述
后面的less不是导出导入用的，而是用来转化为css文件要用到的工具

npm install --save-dev less-loader less,由于使用这个会报错，这里使用指定版本

npm install less@3.9.0 -s --save-dev 这个是 less 用于转为css

npm install less-loader@5.0.0 -s --save-dev 这个是less-loader用于导出
在这里插入图片描述

运行成功在这里插入图片描述

要是有图片文件处理 url-loader 在这里插入图片描述
https://v4.webpack.docschina.org/loaders/#%E6%96%87%E4%BB%B6
安装url-loader, npm install url-loader --save-dev

安装完添加配置文件，并成功打包在这里插入图片描述
运行
而仔细观察，你会发现背景图是通过base64显示出来的

OK，这也是limit属性的作用，当图片小于limit设置的值时，对图片进行base64编码

// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式
在这里插入图片描述
把背景修改为比limit值大的图片，打包报错找不到模块file-loader
所以，我们需要安装file-loader，执行npm install file-loader --save-dev
执行安装完，打包发现dist多了一张图片，这种图片就是需要的背景图
但是运行时，图片没有显示出来，因为我们的index.html在src下，他只会在当前目录找这张图片，找不到就显示404，而我们图片是在dist下的在这里插入图片描述
默认情况下，webpack会将生成的路径直接返回给使用者

但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/ 在这里插入图片描述
成功显示
我们发现webpack自动帮助我们生成一个非常长的名字

这是一个32位hash值，目的是防止名字重复

但是，真实开发中，我们可能对打包的图片名字有一定的要求

比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

所以，我们可以在options中添加上如下选项：

img：文件要打包到的文件夹

name：获取图片原来的名字，放在该位置

hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位

ext：使用图片原来的扩展名在这里插入图片描述

11.ES6语法处理

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel。

而在webpack中，我们直接使用babel对应的loader就可以了。

babel-loader 7版本，babel-core babel核心，babel-preset-es2015用于es6转es5

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

安装完添加配置在这里插入图片描述
再次打包，打包的js中没有es6语法

12.webpack配置vue

安装vue三种方式

1.直接下载,应用

2.CDN引入

3.npm 安装

现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装
注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

npm install vue --save
在这里插入图片描述

打包，运行

发现控制台报错，说使用的vue是仅运行时使用，就是不会编译template，虽然没有写template，但是我们的app就是vue的子组件，也算是一个template，所以我们要修改版本

1.runtime-only -> 代码中, 不可以有任何的template

2.runtime-compiler -> 代码中,可以有template, 因为有compiler可以用于编译template 在这里插入图片描述
安装

npm install vue-loader vue-template-compiler --save-dev

所以我们修改webpack-config的配置，添加如下内容即可

意思就是，当我们导入vue时，优先去node-modules下的vue/dist/vue.esm.js，使用vue

resolve:{
    alias:{
        'vue$':'vue/dist/vue.esm.js'
    }
}

在这里插入图片描述
重新打包，运行成功

13.EL和template的区别

正常运行之后，我们来考虑另外一个问题：

如果我们希望将data中的数据显示在界面中，就必须是修改index.html

如果我们后面自定义了组件，也必须修改index.html来使用组件

但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

解决：

定义template属性：在这里插入图片描述
index.html中只保留一个基本id为div的元素
然后打包，运行

el和template同时存在时，template里的模板会全部替换到el挂载的元素在这里插入图片描述
由于上面代码template太多的话，在同一个js，代码可读性差，把template抽取出来，为一个对象，在注册子组件，再使用在template

const tem={
    template: `
        <div>
            <h3>{{message}}</h3>
            <h3>{{name}}</h3>
            <button @click="btnClick">按钮</button>
       </div>
    `,
    data(){
        return{
            message:'Hello webpack vue',
            name:'dessw',
        }

    },
    methods:{
        btnClick(){
            console.log('哈哈');
        }
    }

};
const app=new Vue({
    el: '#app',
    template: '<tem/>', //使用
    components:{
        tem  //注册组件
    }
});

由于上面代码写在一个文件，再次简化，把对象抽取出来为一个js文件

新建js文件

//使用这个，html代码和js代码放一起不好，使用vue文件
export default {
    template: `
        <div>
            <h3>{{message}}</h3>
            <h3>{{name}}</h3>
            <button @click="btnClick">按钮</button>
       </div>
    `,
    data(){
        return{
            message:'Hello webpack vue',
            name:'dessw',
        }

    },
    methods:{
        btnClick(){
            console.log('哈哈');
        }
    }

};

main引入

import App from './vue/app.js'
const app=new Vue({
    el: '#app',
    template: '<App/>', //使用
    components:{
        App  //注册组件
    }
})

由于上面抽取出来的js文件中，html代码和js代码混合在一起，所以使用vue文件来分离，在这里插入图片描述
script导出了

<template>
    <div>
        <h3 class="title">{{message}}</h3>
        <h3>{{name}}</h3>
        <button @click="btnClick">按钮</button>
    </div>
</template>

<script>
    export default {
        name: "App",
        data(){
            return{
                message:'Hello webpack vue',
                name:'dessw',
            }

        },
        methods:{
            btnClick(){
                console.log('哈哈');
            }
        }
    }
</script>

<style scoped>
.title{
    background-color: green;
}
</style>

main.js导入，并注册

import App from './vue/App.vue'
const app=new Vue({
    el: '#app',
    template: '<App/>', //使用
    components:{
        App  //注册组件
    }
});

但是这里编译是报错，需要一个合适的loader 在这里插入图片描述
执行 npm install vue-loader vue-template-compiler --save-dev
修改webpack.config.js的配置文件，

修改为，打包还是打包错误，需要一个相应的插件在这里插入图片描述
解决方案：

1：把vue-loader回到v14版本参考连接：https://blog.csdn.net/nightwishh/article/details/92799408

2、添加一个插件

这里选择添加一个插件，可以去vue官网查

这里可以参考Vue官网安装一个插件，很简单：进入官网-生态系统-工具-Vue-loader-找到导航条上面的如何从v14迁移，第一个就是！！！在这里插入图片描述

成功运行
错误排查：

4.0的以上的webpack得使用vue-loader14以上的版本

这里可以参考Vue官网安装一个插件，很简单：进入官网-生态系统-工具-Vue-loader-找到导航条上面的如何从v14迁移，第一个就是！！！

vue和vue-template-compiler版本要一致！！！

再嵌套子组件

编写组件在这里插入图片描述
使用
打包，运行成功
配置省去后缀名方法

在webpack-config.js的resolve下添加

extensions: [’.js’,’.css’,’.vue’] 在这里插入图片描述

14.plugin的使用

plugin是什么？

plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别?

loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

步骤二：在webpack.config.js中的plugins中配置插件。

下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

添加版权的Plugin

该插件名字叫BannerPlugin，属于webpack自带的插件。

按照下面的方式来修改webpack.config.js的文件：
在这里插入图片描述
重新打包程序：查看bundle.js文件的头部，看到如下信息
生成版权信息
打包html的plugin

目前，我们的index.html文件是存放在项目的根目录下的。

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。

所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做这些事情：

自动生成一个index.html文件(可以指定模板来生成)

将打包的js文件，自动通过script标签插入到body中

安装插件：使用3.2.0版本，使用最新版会报错

npm install html-webpack-plugin@3.2.0 --save-dev
在这里插入图片描述
添加配置

打包出来后，虽然index页面打包出来了，但是他是生成一个新的页面，我们原页面的< div>没了，我们需要给他定义一个模板，模板就是我们自己写的index.html，让他按照这个模板生成生成

给HtmlWebpackPlugin添加一个属性在这里插入图片描述
出现的问题：1、生成了两个script标签(一个是index模板的，一个是打包生成的)2、我们引入的地址只需要在当前目前，不需要加dist文件，
解决方案：

删除模板的script，到时候用打包生成的script 在这里插入图片描述
注释这个属性，因为这个属性是之前在引用图片文件时地址不一致导致的，所以需要添加一个公共路径，现在我们运行的index，实在dist下了，所以他回去在当前目录下的img找了，所以不需要dist路径了
打包成功，模板和地址都正确在这里插入图片描述
运行成功
js压缩Plugin

15.搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server

如果使用webpack3的话使用：npm install --save-dev webpack-dev-server@2.9.1

在这里插入图片描述
配置

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

port：端口号

inline：页面实时刷新

historyApiFallback：在SPA页面中，依赖HTML5的history模式在这里插入图片描述
启动：因为我们安装devserver时是局部安装，所以要使用本地的webpack,所以我们添加一个script脚本命令，这里会先去本地寻找

dev": “webpack-dev-server " //后面添加dev”: “webpack-dev-server --open” 会运行完直接打开浏览器在这里插入图片描述
运行npm run dev

页面修改时会实时更新在这里插入图片描述
注意版本问题 “webpack”: “^4.44.2”, “webpack-cli”: “^3.1.2”, “webpack-dev-server”: “^3.1.10”

16.配置分离

我们的webpack.config.js配置里有一些是开发时要使用的，有些是编译时要用的，所以我们对他进行分离

1、新建build文件夹，里面建base.config.js（公共部分）、dev.config.js（开发时使用）、prod.config.js（生产时使用）
在这里插入图片描述
2、npm install webpack-merge --save-dev
3、直接打包，肯定会报错，我们要指定一个配置文件
注意：在合并配置文件的那里要使用webpackMerge的merge函数,不然会报错
出现的问题：我们要生成的是在dist下，原因：我们在output出口定义的是当前工作目录下（之前配置文件在最外面，所以使用在当前文件下的dist，可是换了指定的配置文件，在build下，所以默认在build生成的）在这里插入图片描述
解决方案：在导出的文件的配置添加为上一目录的dist，不是在当前工作目录build下的dist
成功生成，运行

一般我们开发时不使用打包，所以使用dev配置文件（里面配置的时webpack-dev-server），需要打包时使用prod配置文件（里面配置打包要用的东西，比如导出html文件）
在这里插入图片描述
使用npm run dev 成功