今天准备把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. 谈一谈如何远程访问MySQL(腾讯云,云主机)

    连接MySQL (其他的sql 基本相同套路) 腾讯云不管怎么设置端口和MySQL权限以及监听端口就是不能连接? 远程访问MySQL数据库的几个关键点 端口设置 数据库权限设置 数据库的监听端口设置 ...

  2. 搭建一个简单的dns缓存服务器

    环境:linux 软件:bind97,bind97-utils, bind97-libs ip:192.168.192.130:192.168.192.131 -------------------- ...

  3. POJ：3421-X-factor Chains（因式分解）（全排列）

    X-factor Chains Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7986 Accepted: 2546 Descr ...

  4. POJ：2431-Expedition

    Expedition Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20089 Accepted: 5786 Descripti ...

  5. UCLOUD使用云主机

    购买云主机后,购买弹性ip: 设置外网防火墙,浏览器否则无法访问服务器资源: 在云主机绑定自定义的防火墙: 使用ssh登录服务器: 一般centos自带apache,没有的话安装,具体教程百度: 安装 ...

  6. HDFS HA(High Availability)高可用性

    HDFS HA(High Availability)高可用性 参考文献: 官方文档 全文翻译 Hadoop组件之-HDFS(HA实现细节) 这张图片的个人理解 由于NameNode在Hadoop1只有 ...

  7. ionic3中关于Ionic ui component使用的一些总结

    在我的理解中,IONIC中例如 ion-list ion-item  ion-input 其实就是相于一段自定义的指令 ,相对于angular1.x中的东西, 所以,我们在使用中,要特别去注意butt ...

  8. 【Java集合源码剖析】Java集合框架

    Java集合工具包位于Java.util包下,包含了很多常用的数据结构,如数组.链表.栈.队列.集合.哈希表等.学习Java集合框架下大致可以分为如下五个部分:List列表.Set集合.Map映射.迭 ...

  9. 途牛banner自动轮播

    <!DOCTYPE html>               <!--申明文档类型:html--> <html lang="en">       ...

  10. 树莓派网线连接后通过ssh远程连接

    新安装的树莓派默认是不支持ssh远程连接的,通过PuTTY (64-bit)会提示连接被拒绝. 本文支持笔记本或pc直接通过网线连接树莓派,具体操作步骤如下: 一.确定树莓派的ip地址及是否开启ssh ...