1.直接打包发布
运行 npm run build 即可生成 dist 文件夹。这就是打包之后的结果。
2.配置:移除 map 文件、打包结果支持File协议
在 vue.config.js 中，加入了两个配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 如果打包结果，希望以File协议（双击打开），需要加如下的配置：
publicPath: '', // 这个值 写成 空字符串，或者 './' 都可以
// 下面的配置，作用是取消js文件正生成的 xxx.map 文件
productionSourceMap: false
})3.生成打包报告
1. 在 package.json 中，build命令后， 加入 --report ，这样的话，打包之后就会生成一个 report.html 文件，这个文件就记录着打包的结果的详细信息。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",⬅这里
"lint": "vue-cli-service lint"
},打包之后，打开 dist 文件夹里面的 report.html ，看一下那个区域的面积最大，说明这个文件的体积就最大。
2. 重新运行打包的命令：npm run build
3. 打包完成后，发现在 dist 目录下多了一个名为 report.html 的文件。在浏览器中打开此文件，会看到详细的打包报告。
4. 优化打包的体积
完整的 externals 配置项
1.在 vue.config.js 配置文件中，找到 configureWebpack 下的 externals，添加如下的配置项：
2.在 /public/index.html 文件的 结束标签之前，添加如下的 js 引用：
3.在 main.js 中注释掉 element-ui 的样式和 quill 的样式：
4.在 /public/index.html 文件的 标签之后，引入需要的 css 样式：
5.配置路由懒加载 （旧版的vue-cli才需要）
