vue代码上传服务器后背景图片404解决方法
问题:代码上传服务器后,图片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解决方法的更多相关文章
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- cropper截图不压缩PHP上传裁剪后的图片
cropperjs使用不多说网上都有很详细的介绍如下面: https://blog.csdn.net/lxy4239/article/details/78920979 主要讲下使用的经历 裁剪后图片不 ...
- Onethink上传服务器后登录不了的问题
本地修改完Onethink后上传到服务器,进入后台登录的时候,发现输入用户名和密码和验证码后,第一次点击登录没反应,第二次点击提示验证码错误. 经过一研究发现 onethink 的登陆是通过API连接 ...
- thinkphp5 上传服务器后 Access denied
服务器报 Access denied,要么报 No input files,但是在网上查了查说是将 PHP 的cgi.fix_pathinfo 改成 1 即可,但是改成 1 显然是有解析漏洞的,尝试寻 ...
- win服务器 文件上传下载出现“未指定的错误” 解决方法汇总
环境 WIN平台IIS服务器 经常出现于ASPX页面 汇总 1.权限问题 出现场景 : 基于ACCESS数据库 原因解析 : 1.首先需要排除自身问题,例如建表使用关键字,格式错误,插入数据与 ...
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...
- 动态input file多文件上传到后台没反应的解决方法!!!
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- DedecmsV5.7本地上传缩略图无法自动添加水印的解决方法
问题:dedecms后台 系统->图片水印设置 图片水印设置有开启了,但是本地上传缩略图无法自动添加水印 网上有很多资料,所以记录一下 1.打开dede(实际项目后台文件夹)/archives_ ...
- php上传文件中文文件名乱码的解决方法
文件上传是我们在处理表单提交时候最常用的功能之一,今天写了一个小小的demo,如下: 先看结构: html为表单提交的页面,php为处理表单的文件,upload为上传文件所放的位置 html: < ...
随机推荐
- C#——字符串
aaarticlea/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAA8CAMAAAA6wCQxAAAAGFBMVEX////w9f5kb9TGyu3b6P6hp
- NSUserDefaults 添加与删除
//NSUserDefaults会创建一个plist文件,内部存放一个字典 NSUserDefaults *userDefaults = [NSUserDefaults standardUser ...
- oracle之简单总结
视图: 作用:是数据库对象,是一个或多个表的或视图中导出的虚表,视图对应的数据并不是存储在视图中,而是存储在数据库中的数据表中. 视图的结构和数据是对数据表进行查询的结果. 优点: 1.简化数据操作. ...
- 20155326刘美岑2016-2017-2《Java程序设计》第三周学习总结
20155326刘美岑2016-2017-2<Java程序设计>第三周学习总结 教材学习内容总结 基本类型和类类型 基本类型:第三章中讲述的那几种,short.long.int.byte. ...
- noip第23课作业
1. 营救 铁塔尼号遇险了!他发出了求救信号.距离最近的哥伦比亚号收到了讯息,时间就是生命,必须尽快赶到那里. 通过侦测,哥伦比亚号获取了一张海洋图.这张图将海洋部分分化成n*n个比较小的单位,其 ...
- Hdu4185 Oil Skimming
Oil Skimming Problem Description Thanks to a certain "green" resources company, there is a ...
- express4.x socket
在这个版本下使用socket,配置比较麻烦. 使用实例:http://www.open-open.com/lib/view/open1402479198587.html 配置文件:BarOrderPr ...
- LED点阵书写显示
LED点阵书写显示屏 摘要:随着时代的发展,数字电子技术已经普及到我们生活,工作,科研,各个领域,而LED显示以其组构方式灵活.显示稳定.功耗低.寿命长.技术成熟.成本低廉等特点在车站.证券所.运 ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- cocoaPods 最新系统上的安装和基本使用图文笔记
1>mac系统自带ruby环境,查看ruby版本信息:ruby -v 2>安装cocoapods:sudo gem install cocoapods 此方法在新版本系统上会报错,如图. ...