今天准备把vue-cli build 的文件发到服务器上单发现会出现图片找不到的问题 解决办法如下

修改 assetsPublicPath: './'

.打开webpack.prod.conf.js，在output：增加 publicPath: './'

虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

亲试好用 备忘

vue-cli打包后图片路径取不到的问题的更多相关文章

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

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

  2. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

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

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

  4. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  5. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  6. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  7. vue打包后图片找不到情况

    打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...

  8. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  9. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

随机推荐

  1. 学习Pytbon第十八篇，异常处理

    什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...

  2. C语言函数篇（三）函数参数高级设计

    在内存空间中, 1. 单位大小的数据 叫 数值 . 比如 int a; char b; ... 2. 由这些单位数据组合起来的内存, 称作 空间. 比如: 各种数组char/int a[10]; 结构 ...

  3. 笔记-flask基础操作

    笔记-flask基础操作 1.      前言 本文为flask基础学习及操作笔记,主要内容为flask基础操作及相关代码. 2.      开发环境配置 2.1.    编译环境准备 安装相关Lib ...

  4. get请求中url传参中文乱码问题

    在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. 一:get请求url中 ...

  5. 通过Aspose.Word和ZXING生成复杂的WORD表格

    1.前言 这是我之前做的一个项目中要求的功能模块,它的需求是生成一个WORD文档,需要每页一个表格并且表格中需要插入文字.条形码和二维码等信息,页数可控制.具体的效果如下图所示: 可以看到有以下几点是 ...

  6. MySQL之查询性能优化（四）

    优化特定类型的查询 COUNT()的作用 COUNT()是一个特殊函数,有两个非常不同的作用:它可以统计某个列值的数量,也可以统计行数.在统计列值时要求列值是非空的(不统计NULL). 如果在COUN ...

  7. how to export chrome speed dial extension?

    locate chrome-extension_dgpdioedihjhncjafcpgbbjdpbbkikmi_0.localstorage, copy it to you want, everyt ...

  8. 《数据结构与算法分析：C语言描述》复习——第四章“树”——二叉树

    2014.06.14 22:49 简介: 二叉树是学习树结构时接触的第一个概念,其他衍生的表示形式包括N叉树(随便多少叉).二叉链表(土话也叫左孩子右兄弟).由于单纯的二叉树是无序的,能做的事情不太多 ...

  9. Java8 时间处理

    Table of Contents 前言 时间单位和时区 时间点 时间段 时间的解析和格式化 时区时间 兼容旧接口 结语 前言 时间处理是一个经常会用到但又不那么好用的功能,其中的主要问题在于对人友好 ...

  10. Mybatis + Oracle 批量insert的问题

    这个问题真的太坑了 之前用ibatis+sql server 的foreach 很容易就写出来批量insert数据,但是测试后报错:SQL结束格式错误 现在换到银行工作,数据库也换成Oracle了 特 ...