问题:代码上传服务器后,图片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. 15-BOM

    BOM的介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的 ...

  2. 基于MySQL自增ID字段增量扫描研究

    目录 目录 1 1. 问题 1 2. 背景 1 3. InnoDB表 2 3.1. 自增ID为主键 2 3.2. 自增ID为普通索引 4 3.3. 原因分析 7 4. MyISAM表 8 4.1. 自 ...

  3. 如何对CentOS FTP服务配置

    根据很多人对CentOS FTP服务的不解,我觉得应该对CentOS FTP服务做出一定的解释. 1.安装 一般在CentOS上都自动安装了vsftd,若没有安装则可以使用以下步骤进行安装yum -y ...

  4. codeforces 877e

    E. Danil and a Part-time Job time limit per test 2 seconds memory limit per test 256 megabytes input ...

  5. 最大流最小割学习 基本知识 | 证明 | FF算法

    可行流 : 能流过去就行,不一定是最大流. 最大流:能流到的最大流量.(可能不只一个) 解决最大流: Ford-Fulkerson方法 最小割:从图中去除一些边,使得源点S到汇点T不连通,去除的这些边 ...

  6. bootstrap3相关文档

    ,每列分配多列 <divclass="container"> <div class="row"> <div class=" ...

  7. Flume source 支持的type类型

    Flume是一个分布式的高可用的消费组件.通过修改配置文件,可以启动不同的agent处理不同来源的数据. agent包含source,channel,sink三个组件.今天我们学习下source的ty ...

  8. [smarty] smarty 模板文件中进行字符串与变量的拼接

    // smarty 模板引擎 $arr_tribeLabelList["`$tribe_id`_"]

  9. centos下添加git

    CentOS中yum里没有Git,需要手动安装. 首先需要安装git的依赖包 yum install curl yum install curl-devel yum install zlib-deve ...

  10. 2.select查询用法

    1.定义查询接口 UserMapper.java package tk.mybatis.simple.mapper; import tk.mybatis.simple.model.SysRole; i ...