ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath 。

对于用 vue-cli 生成的项目,dist 目录结构如下:

dist
├── index.html
└── static
├── css
├── img
└── js

经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置:

    if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置这一部分,根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

vue项目build 之后,css文件加载图片或者字体文件时404的解决。的更多相关文章

  1. 在IIS上新发布的网站,样式与js资源文件加载不到(资源文件和网页同一个域名下)

    在IIS上新发布的网站,网站能打开,但样式与js资源文件加载不到(资源文件和网页是同一个域名下,例如:网页www.xxx.com/index.aspx,图片www.xxx.com/pic.png). ...

  2. Android之com.nostra13.universalimageloader加载图片抛出OutOfMemroyError错误的多种解决办法

    com.nostra13.universalimageloader是用来加载图片非常好的框架,但是也有问题,一旦图片过多的话,很容易就会提示OutOfMemroyError错误,也就是内存溢出的问题, ...

  3. vue项目优化之按需加载组件-使用webpack require.ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  4. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  5. MVC项目发布IIS CSS无法加载

    IIS配置网站在本地服务器调用不了CSS,新装了一个WIN8系统,IIS配置好之后做好的网站样式表浏览器不调用 处理方法 : 把静态内网 勾选打上即可 如果上述方法操作完成还是访问不鸟就继续往下看 权 ...

  6. vue项目优化之路由懒加载

    const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...

  7. vue 项目打包后静态资源加载不到

    1, 2,

  8. js操纵css更改加载图片大小

  9. 前不久一个swift项目用uicollectionview 用sdwebimage 加载图片,发生内存猛增,直接闪退的情况,简单说一下解决方案。

    1.首先在appdelegate方法 didFinishLaunchingWithOptions SDImageCache.sharedImageCache().maxCacheSize=1024*1 ...

随机推荐

  1. CF1208A

    CF1208A 题意: 就是把斐波那契数列的+改成异或,求第n项的值. 解法: 又是一个人类智慧题,打表找规律. 可以发现答案在 $ a,b,a⊕b $ 三个数中循环 CODE: #include&l ...

  2. CentOS7.4搭建ftp服务

    1.使用yum安装vsftpd yum install vsftpd -y 2.安装完成后,启动 FTP 服务: service vsftpd start 3.配置ftp权限 目前 FTP 服务登陆允 ...

  3. Protocol Buffers学习笔记

    Protocol Buffers学习笔记 1. 简介 Protocol Buffers是google发明的一种数据交换格式,独立于语言,独立于平台.与其他的数据交换格式有所不同,Protocol Bu ...

  4. nginx 记录

    正则 ~ 区分大小写匹配 ~* 不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 ^ 以什么开头的匹配 $ 以什么结尾的匹配 转义字符\ 可以转. * ?等 * 代表任意字符 ...

  5. eclipse java

    1Java:Java是由Sun Microsystems公司推出的Java面向对象程序设计语言和Java平台的总称. 2.Eclipse:Eclipse 是一个开放源代码的.基于Java的可扩展开发平 ...

  6. kotlin 之内联函数

    在lambda表达式内联函数,需要在定义函数使用inline关键字 未使用inline关键字 fun main(arg: Array<String>) { print(haha({name ...

  7. Editplus的运行JAVA的配置

    工具--->参数设置

  8. Onvif协议及其在Android下的实现

    好久没有写博客,今天将前段时间做的Onvif协议在Android上的实现分享给大家. 首先,我们先来了解一下什么是Onvif协议:ONVIF 协议是由Open Network Video Interf ...

  9. linux服务端导入oracle数据库.sql脚本

    一般情况下,后缀名为.sql或者为记事本类型的文本脚本可以通过打开后复制或者直接在客户端打开执行,但如果脚本比较大时(比如文件达到几百M以上), 普通文本工具和数据库客户端都无法打开,哪怕可以打开,也 ...

  10. 【401】Python 求合数的所有质数因子

    对于这样的一个题目来说,出看来,可能会想到判断是否为质数,但其实并不需要. 只要按照从2开始遍历,只要遇到可以整除的就是想要的质数,理由是,如果遇到合数的话,那么在此之前一定会遇到这个合数的质因子,因 ...