问题:代码上传服务器后,图片404,使用的font-awesome图标也是404

解决办法:

如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘../../‘

解释:

文件最终会打包压缩为js。当运行的时候,css中的相对路径指向已经发生变化指向了根目录,所以出现加载错误的问题。

下面是这个插件的解释。

extract-text-webpack-plugin

作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

插件参数:该插件有三个参数意义分别如下:

use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

原文地址:http://www.mamicode.com/info-detail-2021707.html

vue代码上传服务器后背景图片404解决方法的更多相关文章

  1. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  2. cropper截图不压缩PHP上传裁剪后的图片

    cropperjs使用不多说网上都有很详细的介绍如下面: https://blog.csdn.net/lxy4239/article/details/78920979 主要讲下使用的经历 裁剪后图片不 ...

  3. Onethink上传服务器后登录不了的问题

    本地修改完Onethink后上传到服务器,进入后台登录的时候,发现输入用户名和密码和验证码后,第一次点击登录没反应,第二次点击提示验证码错误. 经过一研究发现 onethink 的登陆是通过API连接 ...

  4. thinkphp5 上传服务器后 Access denied

    服务器报 Access denied,要么报 No input files,但是在网上查了查说是将 PHP 的cgi.fix_pathinfo 改成 1 即可,但是改成 1 显然是有解析漏洞的,尝试寻 ...

  5. win服务器 文件上传下载出现“未指定的错误” 解决方法汇总

    环境 WIN平台IIS服务器   经常出现于ASPX页面 汇总 1.权限问题 出现场景 : 基于ACCESS数据库   原因解析 : 1.首先需要排除自身问题,例如建表使用关键字,格式错误,插入数据与 ...

  6. ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

    在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...

  7. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  8. DedecmsV5.7本地上传缩略图无法自动添加水印的解决方法

    问题:dedecms后台 系统->图片水印设置 图片水印设置有开启了,但是本地上传缩略图无法自动添加水印 网上有很多资料,所以记录一下 1.打开dede(实际项目后台文件夹)/archives_ ...

  9. php上传文件中文文件名乱码的解决方法

    文件上传是我们在处理表单提交时候最常用的功能之一,今天写了一个小小的demo,如下: 先看结构: html为表单提交的页面,php为处理表单的文件,upload为上传文件所放的位置 html: < ...

随机推荐

  1. 基于脚本的nodemanager管理器

    Step 6: Configure Node Manager on the Managed Servers虚拟机环境: 管理服务器IP:192.168.227.10  AdminServer 受管服务 ...

  2. 使用Windows 8 Pro密钥光盘安装Windows 8.1 Pro

    在Windows 8.1发布接近半年的时候,自己终于腾出来了时间,准备升级一下自己的系统.作为一名极度强迫症患者,加上校园网的悲剧网速,最后决定使用光盘镜像全新安装而不是通过应用商店的升级. Figu ...

  3. 省赛在即!最大流问题回顾学习!!DInic

    Dinic是很好的算法,但是我还是从ek算法复习起步 面对最大流问题,印象最深的就是反向边的思想,他给我们提供了反悔的机会,其实现在放到实际上来想,可以相当于两边的水都流了这条边,只是方向不一样,放到 ...

  4. noah

    1.url:controller/method 2.在index.php中设置display_errors:1 能看到错误提示

  5. 有人在用fastReport作报表时处理过字体自动缩小的问题吗,怎么做

    有人在用fastReport作报表时处理过字体自动缩小的问题吗,怎么做  我来答   浏览 49 次 1个回答 #吃瓜大会# Angelababy演技被吐槽, 你觉得她的演技怎么样? 最佳答案 热心 ...

  6. Android-Kotlin-空值处理&字符串比较&常量

    空值处理: [案例一:] 1.Kotlin对控制处理很严格,默认就不能写null,否则编译都不通过: 描述Car汽车对象: package cn.kotlin.kotlin_base01 /** * ...

  7. ASP.NET中实现回调

    一.引言 在ASp.NET网页的默认模型中,用户通过单击按钮或其他操作的方式来提交页面,此时客户端将当前页面表单中的所有数据(包括一些自动生成的隐藏域)都提交到服务器端,服务器将重新实例化一个当前页面 ...

  8. 省市区三级联动picker-view-微信小程序

    这个是微信小程序的picker-view组件,开发的省市区3级联动,体验还不错,就分享给大家了, 此版本的省市区数据为本地JS数据,免去请求加载数据了,大家直接看源码,先看下面的动图:   项目地址: ...

  9. C# 读取资源文件.resx 中的xml资源

    主要是以字符串的形式来读取xml,然后通过遍历读取节点,通过节点属性名称获取属性值 /// <summary> /// 初始化OPC参数配置 /// </summary> // ...

  10. Entity Framework Core 生成跟踪列-阴影属性

    摘自:https://www.cnblogs.com/tdfblog/p/entity-framework-core-generate-tracking-columns.html Ef Core 官方 ...