vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
1、在上篇文章src配置及引入的基础上修改项目配置:
文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html。
2、具体配置过程如图:
(1)、修改config文件夹下的index.js文件下的build对象下如下(修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'):

(2)、修改build文件夹下的utils.js文件如下(需添加 publicPath:'../../'):

示例:(1)未修改publicPath的图片路径,图片无法正常显示。

(2)添加publicPath的图片路径,可以正常显示。

3、重新npm run build 即可。
vue项目build打包后图片路径不对导致图片空白不显示问题解决方法的更多相关文章
- vue项目webpack打包后图片路径错误
首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- vue开发完成后打包后图片路径不对
用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包 ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- vue项目打包后图片路径问题
当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
- vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...
- vue项目中打包background背景路径问题
项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些 ...
随机推荐
- Integer类的缓存机制
一.Integer类的缓存机制 我们查看Integer的源码,就会发现里面有个静态内部类. public static Integer valueOf(int i) { assert IntegerC ...
- 解决 pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on '127.0.0.1' ([Errno 61] Conne
pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on '127.0.0.1' ([Errno 61] ...
- 做网站用php还是python
单纯说做网站,显然是php更适合,php是专为web而生,而Python只是可以做web.php也比python更简单,更容易学,对于新手更友好. 从权威技术网站w3techs.com2017年7月2 ...
- 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟
开始之前先说一下RingSDK的编译问题,这里演示的程序需要用到最新版本的RingSDK,请务必用SVN到svn://svnhost.cn/RingSDK更新到最新版本,推荐用TortoiseSVN. ...
- centos7systemctl介绍
Linux中如何启动.重启.停止.重载服务以及检查服务(如 httpd.service)状态 # systemctl start httpd.service # systemctl restart ...
- VBox 启动虚拟机失败 - NtCreateFile(\Device\VBoxDrvStub)
在Vbox(5.0.8 版本)启动Ubuntu的虚拟机时,遇到错误信息: NtCreateFile(\Device\VBoxDrvStub) failed: 0xc000000034 STATUS_O ...
- P1040加分二叉树
据说窝回去的那几天考了n次试 过去了一个月才想起来补锅 传送 首先来区分一下什么是中序遍历,什么又是前序遍历 中序遍历:左,根,右(也就是说给出一个序列(按照中序遍历的序列),第i个点左边的点都是i的 ...
- linux RZ 命令
root 账号登陆后,依次执行以下命令: 1 cd /tmp 2 wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz 3 tar zxv ...
- Delphi 二维码生成
Delphi 二维码生成 http://download.csdn.net/detail/warrially/7370171
- Vagrant 手册之 box - 版本
原文地址 从 Vagrant 1.5 版本起,box 开始支持版本.这运行创建 box 的人提交更新,使用 box 的人检查更新.更新 box 并查看变更记录. 对于 Vagrant 新手,box 版 ...