一、构建 VUE 项目
直接用官网的方式建立vue 项目
vue init webpack vue-demo
二、打包 VUE 项目
npm run build
2.1 打包项目介绍
会在项目根目录下出现一个 dist 文件夹，项目目录如下图：
打包.png.
1、这便是打包后的文件，直接将dist 文件夹放到服务器就可以。
2、原 vue 下 src/assets/ 内的文件会被压缩、转为Base64等；
3、原 vue 下 static/ 下的文件，会直接放入压缩后的 static/ 内。
三、打包后的 dist 项目 白屏、图片路径错误解决。
我们直接打开 dist/index.html 发现页面为白屏，且图片路径也发生错误。这需要对打包过程进行配置。
1、 config->index.js 修改：
![]()
config.png
config.png
2、build->utils.js 添加：
![]()
utils.png
utils.png
3、图片路径的写法
（1）src/assets/ 下：
<img src="../assets/img/loginback.png" class="test-img" /> // html
background: url('../assets/img/loginback.png') no-repeat top left ; // css
（2）static/ 下：
<img src="../../static/img/loginback.png" class="test-img" /> // html
background: url('../../static/img/loginback.png') no-repeat top left ; // css
参考文献：
https://www.cnblogs.com/muamaker/p/8023522.html
https://blog.csdn.net/qq_25479327/article/details/79625621
