一、构建项目，本项目使用Vue脚手架2、详细步骤不多说了，具体讲述下项目打包步骤，以及期间遇到Bug的解决方法，项目完成后，目录结构如下：
二、期间我使用了JsonServer来模拟后台数据，我有试过用JsonServer来模拟api接口，但发现打包完成后数据请求不到，所以写了模拟服务器的链接，请求如下：
三、接下来我们进行打包指令npm run build，但是发生了以下报错
四、探索一番后发现需要在build文件夹下的utils.js文件中补一段代码，原因是压缩css语法错误的原因，在utils.js中找到常量cssLoader，并在其中补上这句代码，如图所示
目标文件：根目录 > build > utils.js
minimize:true
五、随后我们继续执行打包命令npm run build，可以看到已经打包成功
六、在文件根目录中出现了一个名为dist的文件夹，打开后我们可以看到打包好的css js img
七、随后我们运行index.html，打开项目后发现项目中的背景图未显示，再一番探索后（其实是百度）发现需要改变项目的路径配置，将绝对路径改为相对路径，如图所示
目标文件：根目录 > config > index.js
八、再回到utils文件中配置下背景图路径，如图所示
目标文件：根目录 > build > utils.js
九、最后重新打包项目，再运行index.html文件，大功告成！
转自https://juejin.cn/post/7043745173288779813
