VUE---项目打包

当项目做完，要执行 npm run build 打包最终的结果（最终的结果会打包进dist文件夹）。

一、配置

在vue.config.js中添加以下内容：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 如果打包结果，希望以File协议（双击打开），需要加如下的配置：publicPath: '', // 这个值 写成 空字符串，或者 './' 都可以// 下面的配置，作用是取消生成 xxx.map 文件productionSourceMap: false
})

二、生成打包报告

在 package.json 中，build命令后，加入 --report ，这样的话，打包之后就会生成一个 report.html 文件，这个文件就记录着打包的结果的详细信息。通过这个文件，我们可以知道打包后项目文件的详细信息，从而有针对性的对文件进行压缩或者改为CDN方式引用。

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build --report","lint": "vue-cli-service lint"
},

report.html的内容如下所示：

从上图可知，dashboard文件最大，原因是该页面引用了echarts包，我们可将echarts的引入改为CDN引入。

三、优化打包的体积

在index.html中加载 CDN 链接，使用其他网站的 axios、echarts、element-ui 等等。并在vue.config.js中配置，在打包时排除第三方包。

以echarts为例：

1、在index.html文件中引入echarts.js文件

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script></body>
</html>

2、在vue.config.js文件中，添加configureWebpack配置，排除第三方包

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 如果打包结果，希望以File协议（双击打开），需要加如下的配置：publicPath: '', // 这个值 写错 空字符串，或者 './' 都可以// 下面的配置，作用是取消生成 xxx.map 文件productionSourceMap: false,// 配置排除哪些第三方包configureWebpack: {// 排除项externals: {// 键(第三方包名--package.json中的名字): 值(window对象中多了什么)echarts: 'echarts',}}
})