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. ARM平台常用性能测试方法

    测试磁盘读写速度: 通过安装hdparm,可以测试EMMC的读写速度: dolphin@localhost:~$ sudo apt-get install hdparm dolphin@localho ...

  2. 《Tomcat权威指南》读书笔记

    第一章 Tomcat的开幕式 1.Tomcat是以Java编写的,这表示在能够构建和测试它之前,必须安装最新的.完整的JAVA运行环境(JRE,Java runtime). 2.Catalina To ...

  3. 解决Debug JDK source 无法查看局部变量的问题方案

    一.问题阐述首先我们要明白JDK source为什么在debug的时候无法观察局部变量,因为在jdk中,sun对rt.jar中的类编译时,去除了调试信息,这样在eclipse中就不能看到局部变量的值. ...

  4. INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES

    [转] https://www.mobibrw.com/2016/3949 adb install 一个apk错误: INSTALL_FAILED_ALREADY_EXISTS 应用已存在,使用 ad ...

  5. JMeter-性能测试之报表设定的注意事项

    在使用 Jmeter 执行性能测试时,需要屏蔽以下模块: 结果树 图形结果 断言 具体的说明,可以见官网:http://jmeter.apache.org/usermanual/component_r ...

  6. Python3及Pycharm安装

    1.首先去python官网下载相应版本的Python安装包.如下: 2.下载完成后解压,双击exe文件进行安装,看到如下界面:Install Now表示默认安装:Customize installat ...

  7. python学习笔记（十二）随机数模块

    import random,string print(random.randint(1,199))#1-199随机取一个整数,包含199 print(string.digits)#所有的数字0-9 p ...

  8. HashMap底层代码分析

    public HashMap() { this.loadFactor = DEFAULT_LOAD_FACTOR; //this.loadFactor为加载因子,其值为默认的加载因子常量:DEFAUL ...

  9. Linux 系统参数优化

    修改系统所有进程可打开的文件数量 sysctl -w fs.file-max=2097152sysctl -w fs.nr_open=2097152 > vi /etc/sysctl.conff ...

  10. [NOIP2014]飞扬的小鸟[DP]

    [NOIP2014]飞扬的小鸟 ——!x^n+y^n=z^n 题目描述: Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画 ...