vue run build之后图片无法加载

VUE项目打包(解决背景图片不显示问题)


改变路径配置

将绝对路径改为相对路径

目标文件:项目目录 > config文件夹 > index.js

assetsPublicPath:'/' 改为:assetsPublicPath:'./'   (加一个点变为相对路径)

 
 
  • 1

这里写图片描述


配置背景图片路径

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片,在build文

件内utils.js中配置路径。

目标文件:项目目录 > build文件夹 >utils.js

在图中所示位置添加代码

publicPath:'../../',

 
 
  • 1

这里写图片描述


在命令行中用npm run build 进行打包。

npm run build
 
 
  • 1

生成dist文件


查看

打开dist文件内index.html文件 一切操作正常,则打包完毕

0 个人打赏
文章最后发布于: 2018-07-11 10:52:40
    <div class="recommend-box"><div class="recommend-item-box type_blog clearfix" data-report-view="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_37281252/article/details/79442355&quot;,&quot;strategy&quot;:&quot;BlogCommendFromMachineLearnPai2&quot;,&quot;index&quot;:&quot;0&quot;}" data-report-click="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_37281252/article/details/79442355&quot;,&quot;strategy&quot;:&quot;BlogCommendFromMachineLearnPai2&quot;,&quot;index&quot;:&quot;0&quot;}">
<div class="content" style="width: 712px;">
	<a href="https://blog.csdn.net/qq_37281252/article/details/79442355" target="_blank" rel="noopener" title="vue项目打包后资源相对引用路径的和背景图片路径问题">
	<h4 class="text-truncate oneline" style="width: 552px;">
			<em>vue</em><em>项目</em><em>打包</em>后资源相对引用路径的和<em>背景图片</em>路径<em>问题</em>		</h4>
	<div class="info-box d-flex align-content-center">
		<p class="date-and-readNum oneline">
			<span class="date hover-show">03-05</span>
			<span class="read-num hover-hide">
				阅读数 
				3931</span>
			</p>
		</div>
	</a>
	<p class="content" style="width: 712px;">
		<a href="https://blog.csdn.net/qq_37281252/article/details/79442355" target="_blank" rel="noopener" title="vue项目打包后资源相对引用路径的和背景图片路径问题">
			<span class="desc oneline">vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行。1、修改config=&amp;amp;gt;index.js=&amp;amp;gt;build=&amp;amp;gt;asse...</span>
		</a>
		<span class="blog_title_box oneline ">
								<span class="type-show type-show-blog type-show-after">博文</span>
										<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_37281252">来自:	<span class="blog_title"> lyf的博客</span></a>
											</span>
	</p>
</div>
</div>
<div class="comment-edit-box d-flex">
	<a id="commentsedit"></a>
	<div class="user-img">
		<a href="//me.csdn.net/guitarist0505" target="_blank" rel="noopener">
			<img class="" src="https://avatar.csdn.net/7/2/7/3_guitarist0505.jpg">
		</a>
	</div>
	<form id="commentform">
		<input type="hidden" id="comment_replyId">
		<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="想对作者说点什么"></textarea>
		<div class="opt-box"> <!-- d-flex -->
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="80996947">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div style="display: none;" class="csdn-tracking-statistics tracking-click" data-report-click="{&quot;mod&quot;:&quot;popu_384&quot;,&quot;dest&quot;:&quot;&quot;}"><a href="#" target="_blank" class="comment_area_btn" rel="noopener">发表评论</a></div>
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				<div class="txt-selected text-truncate">添加代码片</div>
				<svg class="icon d-block" aria-hidden="true">
					<use xlink:href="#csdnc-triangledown"></use>
				</svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>  
			<div class="right-box">
				<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
				<input type="button" class="btn btn-sm btn-cancel d-none" value="取消回复">
				<input type="submit" class="btn btn-sm btn-red btn-comment" value="发表评论">
			</div>
		</div>
	</form>
</div>

	<div class="comment-list-container">
	<a id="comments"></a>
	<div class="comment-list-box">
	</div>
	<div id="commentPage" class="pagination-box d-none"></div>
	<div class="opt-box text-center">
		<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
	</div>
</div>
Vue 打包背景图片显示问题 - 你蠢哭我咯的博客 - CSDN博客

8-29

Vue 打包背景图片显示问题 - 疯三年的博客 - CSDN博客

1-30

		<div class="recommend-item-box blog-expert-recommend-box" style="display: block;">
		<div class="d-flex">
			<div class="blog-expert-recommend">
				<div class="blog-expert">
					<div class="blog-expert-flexbox" data-report-view="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/qq_37281252" target="_blank"><img src="https://avatar.csdn.net/4/5/3/3_qq_37281252.jpg" alt="iulyf" title="iulyf"></a><span data-report-click="{&quot;mod&quot;:&quot;popu_710&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><span class="blog-expert-button-follow btn-red-follow" data-name="qq_37281252" data-nick="iulyf">关注</span></span></div><div class="info"><span data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/qq_37281252" target="_blank"><h5 class="oneline" title="iulyf">iulyf</h5></a></span>  <p></p><p class="article-num" title="39篇文章"> 39篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/liangxhblog" target="_blank"><img src="https://avatar.csdn.net/1/E/B/3_liangxhblog.jpg" alt="liangxhblog" title="liangxhblog"></a><span data-report-click="{&quot;mod&quot;:&quot;popu_710&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><span class="blog-expert-button-follow btn-red-follow" data-name="liangxhblog" data-nick="liangxhblog">关注</span></span></div><div class="info"><span data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/liangxhblog" target="_blank"><h5 class="oneline" title="liangxhblog">liangxhblog</h5></a></span>  <p></p><p class="article-num" title="39篇文章"> 39篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/qq_41725450" target="_blank"><img src="https://avatar.csdn.net/1/D/9/3_qq_41725450.jpg" alt="一捆铁树枝" title="一捆铁树枝"></a><span data-report-click="{&quot;mod&quot;:&quot;popu_710&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><span class="blog-expert-button-follow btn-red-follow" data-name="qq_41725450" data-nick="一捆铁树枝">关注</span></span></div><div class="info"><span data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/qq_41725450" target="_blank"><h5 class="oneline" title="一捆铁树枝">一捆铁树枝</h5></a></span>  <p></p><p class="article-num" title="61篇文章"> 61篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div><div class="blog-expert-item"><div class="blog-expert-info-box"><div class="blog-expert-img-box" data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/Angiexia" target="_blank"><img src="https://avatar.csdn.net/7/C/9/3_angiexia.jpg" alt="提拉米苏x" title="提拉米苏x"></a><span data-report-click="{&quot;mod&quot;:&quot;popu_710&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><span class="blog-expert-button-follow btn-red-follow" data-name="Angiexia" data-nick="提拉米苏x">关注</span></span></div><div class="info"><span data-report-click="{&quot;mod&quot;:&quot;popu_709&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_34611721/article/details/80996947#%E6%94%B9%E5%8F%98%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE&quot;}"><a href="https://blog.csdn.net/Angiexia" target="_blank"><h5 class="oneline" title="提拉米苏x">提拉米苏x</h5></a></span>  <p></p><p class="article-num" title="185篇文章"> 185篇文章</p><p class="article-num" title="排名:千里之外"> 排名:千里之外</p><p></p></div></div></div></div>
				</div>
			</div>
		</div>
	</div><div class="recommend-item-box baiduSearch recommend-box-ident" data-report-view="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Dg_Zing/article/details/87909582&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:&quot;3&quot;}" data-report-click="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Dg_Zing/article/details/87909582&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:&quot;3&quot;}" data-track-view="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Dg_Zing/article/details/87909582&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:2,&quot;extend1&quot;:&quot;_&quot;}" data-track-click="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Dg_Zing/article/details/87909582&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:2,&quot;extend1&quot;:&quot;_&quot;}" data-flg="true">                <a href="https://blog.csdn.net/Dg_Zing/article/details/87909582" target="_blank">              		<h4 class="text-truncate oneline" style="width: 634px;"><em>vue</em><em>项目</em><em>打包</em>后css<em>背景图片</em>无法<em>显示</em><em>问题</em> - Arlisol的博客 - CSDN博客</h4>                  <div class="info-box d-flex align-content-center">                    <p>                      <span class="date">5-30</span>                    </p>                  </div>                </a>            	</div><div class="recommend-item-box baiduSearch recommend-box-ident" data-report-view="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/a458651114/article/details/85245245&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:&quot;4&quot;}" data-report-click="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/a458651114/article/details/85245245&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:&quot;4&quot;}" data-track-view="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/a458651114/article/details/85245245&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:3,&quot;extend1&quot;:&quot;_&quot;}" data-track-click="{&quot;mod&quot;:&quot;popu_614&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/a458651114/article/details/85245245&quot;,&quot;strategy&quot;:&quot;searchFromBaidu1&quot;,&quot;index&quot;:3,&quot;extend1&quot;:&quot;_&quot;}" data-flg="true">                <a href="https://blog.csdn.net/a458651114/article/details/85245245" target="_blank">              		<h4 class="text-truncate oneline" style="width: 634px;">关于<em>Vue</em><em>项目</em><em>打包</em>发布后CSS中的<em>背景图片</em>不<em>显示</em><em>问题</em> - a4..._CSDN博客</h4>                  <div class="info-box d-flex align-content-center">                    <p>                      <span class="date">1-21</span>                    </p>                  </div>                </a>            	</div>
vue+webpack项目打包背景图片加载不出来 - heyuqing3..._CSDN博客

2-16

vue打包背景图片显示问题 - qq_43287934的博客 - CSDN博客

5-21

vue打包背景图片显示问题 - 疯流人物 - CSDN博客

3-2

Vue项目打包背景图片资源路径错误的解决方案 - 夏尔 - CSDN博客

11-7

Vue.js 使用element-ui 做走马灯,图片一直显示不出来
03-12

- 问答

解决vue项目打包背景图片找不到的问题 - weixin_3090..._CSDN博客

8-21

vue项目打包后css及图片路径不对,显示空白

06-27 阅读数 811

博文 来自: xfmuchengxue的博客

vue项目打包后,npm run build相关配置,以及解决项目打包后,图片404,背景图片找不到,iview代码出问题的情况

07-30 阅读数 3749

1.首先找到config下的index.js文件将build下的assetsPublicPath的斜杠换成./操作如下只需要换build中的就可以dev中的assetsPublicPath不用动不然打... 博文 来自: 李小乐er

            <div class="recommend-item-box type_hot_word">
                            <div class="content clearfix" style="width: 712px;">
                <div class="float-left">
                                    <span>
                    <a href="https://www.csdn.net/gather_1c/NtjaAg1sLWRvd25sb2Fk.html" target="_blank">
                    c#1如何搞成01</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_14/NtjaAg2sLWRvd25sb2Fk.html" target="_blank">
                    c# 系统托盘图标</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_1d/NtjaAg3sLWRvd25sb2Fk.html" target="_blank">
                    c# 键值对 键可以重复</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_19/NtjaAg4sLWRvd25sb2Fk.html" target="_blank">
                    c#把负数转整形</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_1d/NtjaAg5sLWRvd25sb2Fk.html" target="_blank">
                    c# 鼠标移上去提示</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_10/NtjaEgwsLWRvd25sb2Fk.html" target="_blank">
                    c#结构体定义</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_18/NtjaEgxsLWRvd25sb2Fk.html" target="_blank">
                    使用c#编写一个透明窗体</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_1f/NtjaEgysLWRvd25sb2Fk.html" target="_blank">
                    api 饿了么c#</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_1f/NtjaEgzsLWRvd25sb2Fk.html" target="_blank">
                    c# 根据网络定位</a>
                </span>
                                    <span>
                    <a href="https://www.csdn.net/gather_18/NtjaEg0sLWRvd25sb2Fk.html" target="_blank">
                    c# 清除html标签</a>
                </span>
                                    </div>
            </div>
                            </div>
                        <div class="recommend-loading-box">
            <img src="https://csdnimg.cn/release/phoenix/images/feedLoading.gif">
        </div>
        <div class="recommend-end-box">
            <p class="text-center">没有更多推荐了,<a href="https://blog.csdn.net/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
        </div>
    </div>
                <div class="template-box">
            <span>©️2019 CSDN</span><span class="point"></span>
        <span>皮肤主题: <a href="https://blog.csdn.net/guitarist0505" target="_blank" style="color:#3399ea">skin-blackboard</a></span>
        <span> 设计师:
                                CSDN官方博客                            </span>
        </div>
                    <div id="reward" class="reward-box" style="top: 21px; left: -122px;">
<p class="rewad-title">打赏<span class="reward-close"><svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"><defs><style type="text/css"></style></defs><path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path></svg></span></p>
<dl>
	<dd><a href="javascript:;"><img src="https://avatar.csdn.net/5/E/5/3_qq_34611721.jpg" alt=""></a></dd>
	<dt>
		<p class="blog-name">小唛的前端宝库</p>
		<p class="blog-discript">“你的鼓励将是我创作的最大动力”</p>
	</dt>
</dl>
<div class="money-box">
    			            	<span class="choosed choose_money" data-id="5">5C币</span>
		        							<span class="choose_money" data-id="10">10C币</span>
		        							<span class="choose_money" data-id="20">20C币</span>
		        							<span class="choose_money" data-id="50">50C币</span>
		        							<span class="choose_money" data-id="100">100C币</span>
		        							<span class="choose_money" data-id="200">200C币</span>
		        	</div>
<div class="sure-box">
	<p class="is-have-money"><a class="reward-sure">确定</a></p>
</div>
        </main>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值