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打包后图片路径不对导致图片空白不显示问题解决方法的更多相关文章

  1. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

  2. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  3. vue开发完成后打包后图片路径不对

    用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包 ...

  4. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  5. vue项目打包后图片路径问题

    当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...

  6. Vue通过build打包后 打开index.html页面是空白的

    最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

  7. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  8. Vue项目build打包部署到Tomcat后，刷新报404错误解决方案

    问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...

  9. vue项目中打包background背景路径问题

    项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些 ...

随机推荐

  1. $LCT$维护子树信息学习笔记

    \(LCT\)维护子树信息学习笔记 昨天\(FDF\)好题分享投了 \([ZJOI2018]\)历史 这题. 然后我顺势学学这个姿势. 结果调了一年...于是写个笔记记录一下. 基本原理 比较显然地, ...

  2. redis专题

    1.Linux安装redis 2.redis持久化 3.redis配置 4.SpringBoot整合Redis发布订阅 5.redis事务 5.1.redis事务介绍 5.2. redisTempla ...

  3. springboot 中的 thymeleaf 页面进阶小知识

    我们做好了登录页,那设计一个场景吧,比如我们登录后跳转到公司主页,想从公司主页再跳转到员工列表页: 这样的场景我们该如何实现,首先要知道一些基础知识,就是SpringBoot的一些关于请求的架构知识: ...

  4. R reticulate 设置 python 环境

    library("reticulate") use_python("/usr/bin/python", required = T) py_config() 注意 ...

  5. [洛谷P4172] WC2006 水管局长

    问题描述 SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一条从A至B的水 ...

  6. Task2.特征提取

    参考:https://blog.csdn.net/u012052268/article/details/77825981/ 利用jieba分词工具去除停用词: 停用词:1.在SEO中为节省空间和提高搜 ...

  7. php中ajax的使用实例讲解

    一.总结 1.多复习:代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器, ...

  8. Linux Crontab命令定时任务基本语法

    一.Crontab查看编辑重启 1.查看crontab定时执行任务列表 crontab -l 2.编辑crontab定时执行任务 crontab -e 3.删除crontab定时任务 crontab  ...

  9. easyui禁止下拉框

    $("#"+vpcid).combobox({disabled: true}); $("#"+vpcid).combobox('setValue',parent ...

  10. ORA-00020: maximum number of processes (800) exceeded

    [oracle@db04-1 ~]$ sqlplus -prelim / as sysdba SQL*Plus: Release 11.2.0.3.0 Production on 星期四 8月 31 ...