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. git@github.com出现Permission denied (publickey)

    上传项目的时候出现Permission denied (publickey)这个问题 解决方案如下: 看本地的.git/config设置的仓库url地址和github使用的链接地址是否一致如下图,如u ...

  2. Robomongo可视化命令

    ## 更新命令示例 db.getCollection('collection_name').update(    {'_id':ObjectId('id string')},     {$set:{' ...

  3. 使用django 的cache设置token的有效期

    from rest_framework.authentication import BaseAuthentication from rest_framework.exceptions import A ...

  4. Fabric的使用总结

    环境说明 建议python版本:2.7 fabric版本:最新版(当前为1.10.2) fabric安装 通过pip.py的方式安装(详细可以在fabric官网了解) fabric执行py文件的方法, ...

  5. LightOJ 1079 Just another Robbery (01背包)

    题目链接 题意:Harry Potter要去抢银行(wtf???),有n个银行,对于每个银行,抢的话,能抢到Mi单位的钱,并有pi的概率被抓到.在各个银行被抓到是独立事件.总的被抓到的概率不能超过P. ...

  6. php大文件断点续传

    该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...

  7. BZOJ 3879: SvT 虚树 + 后缀自动机

    Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...

  8. Codeforces 846F - Random Query

    原题链接:http://codeforces.com/contest/846/problem/F 题意:给一个数列,任意取区间[l, r],问区间内不同数字的个数的期望是多少. 思路: 对于第i个数a ...

  9. 提示”The following modules are missing or built with a different engine version”

    一台机器使用自行编译版本引擎修改了工程后,另一台机器也使用自行编译版本引擎编辑该工程,有时会出现标题的提示 解决办法: 打开\Engine\Binaries\Win64\UE4Editor.modul ...

  10. PHP操作Excel – PHPExcel 基本用法

    利用PHP实现对于Excel的写入和读取,主要借助于PHPExcel插件来完成. 准备工作: 1.下载PHPExcel的SDK,下载地址:https://github.com/PHPOffice/PH ...