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: < ...
随机推荐
- 一个支持邮件带附件群发的java类
import java.io.UnsupportedEncodingException;import java.util.ArrayList;import java.util.Date;import ...
- How to Start a Business in 10 Days
With an executive staffing venture about to open, a business loan from the in-laws gnawing at her co ...
- 28、vSocket模型详解及select应用详解
在上片文章已经讲过了TCP协议的基本结构和构成并举例,也粗略的讲过了SOCKET,但是讲解的并不完善,这里详细讲解下关于SOCKET的编程的I/O复用函数. 1.I/O复用:selec函数 在介绍so ...
- 微信小程序-flex布局中align-items和align-self区别
首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...
- 初始kafka
kafka 简介 Kafka是Linkedin于2010年12月份开源的消息系统 一种分布式的.基于发布/订阅的消息系统 ,另外提供数据分布式缓存功能 特点 消息持久化:通过O(1)的磁盘数据结构提供 ...
- 深拷贝&浅拷贝&引用计数&写时拷贝
(1).浅拷贝: class String { public: String(const char* str="") :_str(]) { strcpy(_str,str); } ...
- Chubby是什么?
先简单的理解,以后补充: 为了解决hadoop分布式系统的一致性问题 ,有很多人提出很多protocol,其中就有有名的Paxos算法(Latex作者提出,算法需要学习), 但是Chubby并不是一个 ...
- cxgrid过滤使用心得
uses cxFilter; cxgrid过滤条件清除:cxgrdbtblvwGrid1DBTableView2.DataController.Filter.AutoDataSetFilter:=Tr ...
- vue项目webpack中Npm传递参数配置不同域名接口
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...
- WinDbg探究CLR底层(1) - 应用程序域
一.什么是应用程序域 操作系统由于其稳定性与可靠性的要求,都会使用隔离层,来确保运行在某个隔离层内的代码不会对其他隔扇层的代码产生影响.如Windows通过进程来实现这种隔离机制,所能的可执行代码.数 ...