1.在vue.config.js中配置publicPath，只需给默认的添加一个“.”
{publicPath: './'}
2.在package.json中找打包命令，例如：bulid:pro，运行试试页面是否可以加载出来（运行dist下面的index.html）
yarn build:prod
3.懒加载优化，魔法优化，给打包后的js文件指定文件名
components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
4.生成打包工具,在package.json中添加 --report，生成打包报告
"build:prod": "vue-cli-service build --report"
5.在vue.config.js中添加如下代码，去除代码所有打印日志
chainWebpack(config) {config.optimization.minimizer('terser').tap((args) => {args[0].press.drop_console = truereturn args})}
6.webpack配置排除打包，将第三方库不打包进自己的项目，存入CDN中。在vue.config.js中，添加externals和cdn,前提是判断一下是否是production环境，如果是的话，就执行，js语句不能写在对象中，所以将他们提出来，写在全局，可参考以下代码，只要在下面引入了css 文件，可以去main.js中注释相应的css文件。在vue.config.js全局中复制以下代码：
let externals = {}let cdn = { css: [], js: [] }// 判断是否是生产环境const isProduction = process.env.ENV === 'production'if (isProduction) {externals = {/*** externals 对象属性解析。* 基本格式：*'包名' : '在项目中引入的名字'**/'vue': 'Vue','element-ui': 'ELEMENTUI','xlsx': 'XLSX'}cdn = {css: ['/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表],js: [// vue must at first!'/vue@2.6.12/dist/vue.js', // vuejs'/element-ui/lib/index.js', // element-ui js'/npm/xlsx@0.16.6/dist/xlsx.full.min.js' // xlsx]}}
如果你忘记自己在项目中的名字，可以在src文件下，添加test/test.html，进行测试,例如测试element-ui的文件名，在浏览器的控制台输入window
<!DOCTYPE html><html lang="en"><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"><title>Document</title></head><body><script src="/vue@2.6.12/dist/vue.js"></script><script src="/element-ui/lib/index.js"></script></body></html>
在vue.congif.js下的model.exports中的configureWebpack添加externals，一定不要导入cdn，不然打包失败，cdn操作看步骤7
configureWebpack: {// 配置单页应用程序的页面的标题// 省略其他....externals,resolve: {alias: {'@': resolve('src')}}}
7.通过html-webpack-plugin注入到index.html之中，在vue.config.js中，设置
chainWebpack(config) {//省略其他........ // 注入cdn变量 (打包时会执行)config.plugin('html').tap(args => {args[0].cdn = cdn // 配置cdn给插件return args})}
8.找到public/index.html通过配置CDN Config依次注入 css 和 js
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= webpackConfig.name %></title><!-- 引入样式 -->+<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>+ <link rel="stylesheet" href="<%=css%>">+ <% } %><!-- 引入JS -->+ <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>+<script src="<%=js%>"></script>+ <% } %></head>
9.运行npm run build:prod(看package.js中生成环境的命令)
到这里我们的项目已经打包完成了，如果还觉得太大，可以看自己的report报告，根据报告尽可能地将缩小，主要是通过懒加载和cdn缩小自己的项目
如果觉得《Vue项目上线打包步骤》对你有帮助，请点赞、收藏，并留下你的观点哦！
