今天准备把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. 图解HTTP总结（7）——确保Web安全的HTTPS

    HTTP 主要有这些不足, 例举如下.       通信使用明文( 不加密) , 内容可能会被窃听.       不验证通信方的身份, 因此有可能遭遇伪装. 无法证明报文的完整性, 所以有可能已遭篡改 ...

  2. Linux基本的指令操作

    绝对路径: 路径的写法,由根目录/写起,例如:/usr/share/doc这个目录. 相对路径: 路径的写法,不由/写起,例如由/usr/share/doc要到/usr/share/man底下时,可以 ...

  3. python学习之控制流1

    配置环境:python 3.6 python编辑器:pycharm 代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- # 控制流: # 1.布尔值: ...

  4. Python 中关于文件操作的注意事项

    文件操作 #打开文件 f = open('要打开的文件路径',mode = 'r/w/a', encoding = '文件原来写入时的编码') #操作 data = f.read() #读取 f.wr ...

  5. manjaro安装teamviewer实现远程连接

    不要安装库里面的这两个版本,安装后桌面快捷方式和命令行运行都正常显示窗口,但没有teamviewer ID和随机密码 12.x版本也不用下载尝试了 ➜ ~ teamviewer Init...Chec ...

  6. linux-shell——01

    没有什么好的标题,只是一些随笔.我用的是linux虚拟机,red hat 7 一:nat模式使得虚拟机可以访问外网,但是这种模式下只可以访问外网,但外面的不能访问里面 首先将虚拟机的网络连接改为nat ...

  7. 011---Djang的cookie和session

    -------------------------------------------------------------cookie与session------------------------- ...

  8. [Codeforces947D]Riverside Curio（思维）

    Description 题目链接 Solution 设S[i]表示到第i天总共S[i]几个标记, 那么满足S[i]=m[i]+d[i]+1 m[i]表示水位上的标记数,d[i]表示水位下的标记数 那么 ...

  9. 笔记-爬虫-js代码解析

    笔记-爬虫-js代码解析 1.      js代码解析 1.1.    前言 在爬取网站时经常会有js生成关键信息,而且js代码是混淆过的. 以瓜子二手车为例,直接请求https://www.guaz ...

  10. 笔记-scrapy与twisted

    笔记-scrapy与twisted Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是事件驱动的,并且比较适合异步的代码. 在任何情况下,都不要写阻塞的代码.阻塞的代码包括: ...