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. css3 动画 Transition

      CSS Transition 1.1 基本用法 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. 上面是一个演示,当鼠标放置 ...

  2. React笔记01——React开发环境准备

    1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...

  3. 调试IPV6

    从Mac分享IPV6 WIFI的方法: 按住opition + 系统设置中的share 进入 如果被拒了要上诉或者回复审核团队邮件,可以参考这个写: 尊敬的APP审查委员会: 您们好!我们希望将自己开 ...

  4. swan.onPageNotFound

    解释: 监听小程序要打开的页面不存在事件.该事件与 App.onPageNotFound 的回调时机一致. 方法参数: Function callback小程序要打开的页面不存在的事件回调函数. ca ...

  5. Linux负载均衡软件LVS

    linux下的开源负载均衡软件LVS的安装.配置和使用.LVS是一个中国人创建和开发的开放源码项目,利用LVS可以构建高可用.高可靠的负载均衡集群,因此,利用Linux+LVS不但可以假设高性能的负载 ...

  6. 基于MyBatis实现Dao理论

    基于MyBatis实现Dao理论 推荐使用xml提供sql 实现接口推荐使用Mapper自动实现DAO接口,让我们更关注sql书写本身

  7. 2019牛客暑期多校训练营(第六场)C - Palindrome Mouse (回文自动机)

    https://ac.nowcoder.com/acm/contest/886/C 题意: 给出一个串A , 集合S里面为A串的回文字串 , 现在在集合S里面找出多少对(a,b),b为a的字串 分析: ...

  8. 关于线段树or 树状树状 在二维平面搞事情!Orz

    第一式:https://ac.nowcoder.com/acm/contest/143/I 题意: 有 n 个点,一个点集 S 是好的,当且仅当对于他的每个子集 T,存在一个右边无限长的矩形,使得这个 ...

  9. loj#137 最小瓶颈路 加强版

    分析 我们知道答案一定再最小生成树上 于是我们按边权从小到大建立kruskal重构树 然后每次查询lca的值即可 由于询问较多采用st表维护lca 代码 格式化代码 #include<bits/ ...

  10. Git学习及使用

    一.认知git理论 1.git出现的背景 版本控制 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上 ...