14 -vue 打包图片路径错误解决
2018-12-05 本文已影响0人
大大的小小小心愿
一、构建 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/ 下:
<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