问题：代码上传服务器后，图片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. 安装mysql后必做的两件事

    1..删除掉不需要的用户 查看用户表mysql> SELECT User,Host FROM mysql.user; +------+-------------------------+ | U ...

  2. CImageList

    创建 有五个重载函数,分别如下: BOOL Create(int cx, int cy, UINT nFlags, int nInitial, int nGrow); BOOL Create(UINT ...

  3. noip2017d1t3

    其实是参考洛谷上某篇题解的思路: 先求出两个dis数组表示从1走和从n走的最短路: 转移方程:dp[v][dis1[u]-dis1[v]+w+j]+=dp[u][j]; 转移顺序要注意一下呢,肯定是先 ...

  4. jsp 中出现大量红线，而且页面能正常访问

    第一次,出现这种情况真的很苦恼,估计是有强迫症的原因,就是看着不舒服,都页面能正常访问,但是还是想解决它 解决方法:依次按下 ctl+A ctl+X.ctl+V, 没看错就是 全选,剪切,粘贴 就好了 ...

  5. 20155326《Java程序设计》实验一实验报告

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版) ...

  6. 【python-字典】判断python字典中key是否存在的

    一般有两种通用做法: 第一种方法:使用自带函数实现: 在python的字典的属性方法里面有一个has_key()方法: #生成一个字典 d = {'name':Tom, 'age':10, 'Tel' ...

  7. Maven中的配置文件

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...

  8. Python自动化开发 -进程、线程和协程(二)

    本节内容 一.线程进程介绍 二. 线程 1.线程基本使用 (Threading) 2.线程锁(Lock.RLock) 3.信号量(Semaphore) 4.事件(event) 5.条件(Conditi ...

  9. poj1321 DFS

    棋盘问题 Time Limit: 1000 MS Memory Limit: 10000 KB 64-bit integer IO format: %I64d , %I64u Java class n ...

  10. [Proposal]Transform ur shapes!

    [Name] Transform ur shapes [Motivation]市场上有很多涂鸦游戏,例如火柴人涂鸦,非常有趣 我们可以结合所学,将一些图形变形的操作融入进去,做一个我们自己的有趣的游戏 ...