今天准备把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. spring源码学习中的知识点

    一.循环依赖 循环依赖就是循环引用,就是两个或多个bean之间互相持有对方. 1.构造器循环依赖 表示通过构造器注入造成的循环依赖,此依赖是无法解决的,只能抛出BeanCurrentlyInCreat ...

  2. TouTiao开源项目 分析笔记13 最后一个订阅号的实现主页面

    1.实现订阅号的基础类 1.1.本地订阅号的Bean类==>MediaChannelBean public class MediaChannelBean implements Parcelabl ...

  3. svn服务器的配置和使用

    安装好了svn服务器,打开 VisualSVN Server Manager 先新建用户和组,在代码库创建的时候可以指定哪些用户或者组有读写权限,也可以创建好后指定 创建用户 输入用户名和密码创建用户 ...

  4. static任我行- 为人不注意的static

    前几天一直在想,static方法如果没有被调用,会不会分配内存的问题,查了一下资料,终于得到了一个官方的说法了. static 方法调用:使用比较频繁的时候使用,像数据库连接串,Connection ...

  5. copyEvens

    public int[] copyEvens(int[] nums, int count) { int newIndex=0; int i=0; int newArray[] = new int[co ...

  6. 剑指Offer - 九度1283 - 第一个只出现一次的字符

    剑指Offer - 九度1283 - 第一个只出现一次的字符2013-11-21 21:13 题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出 ...

  7. python 3 直接使用reload函数报错

    reload()是python2 的内置函数可以直接使用,但是python3 直接使用此函数报错,需要导入importlib 模块 from importlib import reload

  8. springboot09 事务 H2数据库

    一.事务 1. 事务介绍 事务可以包含多个操作步骤 , 如果有一个步骤失败,那么这一组都以失败告终. 事务是指包含多个微小逻辑单元的一组操作, 只要其中有一个逻辑失败了,那么这一组操作就全部以失败告终 ...

  9. iptables的配置文件/etc/sysconfig/iptables不存在 linux防火墙开关命令

    某linux服务器,使用 cat /etc/sysconfig/iptables命令时, 找不到文件. 1. service iptables status 使用该命令检查状态 如果之前找不到配置文件 ...

  10. 台州学院we are without brain 训练 后缀数组

    sa[i]表示排名为 i 的后缀的第一个字符在原串中的位置 rank[i]表示按照从小到大排名  以i为下标开始的后缀的排名 height[i]表示排名为 i 和排名为 i+1的后缀的最长公共前缀的长 ...