14 -vue 打包图片路径错误解决

一、构建 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

2、build->utils.js 添加：

utils.png

3、图片路径的写法

（1）src/assets/ 下：

            // html

background: url('../assets/img/loginback.png') no-repeat top left ;   // css

（2）static/ 下：

            // 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