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. ICEM—倾斜孔

    原视频下载:https://yunpan.cn/cS3UGMEscrYpL  访问密码 839b

  2. Qt for Android (二) Qt打开android的相册

    以下有一个可以用的Demo https://files.cnblogs.com/files/wzxNote/Qt-Android-Gallery-master.zip 网盘地址: https://pa ...

  3. 单词拼接(dfs/回溯/递归)

    单词拼接传送门 //单词拼接 #include<stdio.h> #include<string.h> #include<algorithm> using name ...

  4. 2018-2019-2 20165210《网络对抗技术》Exp9 Web安全基础

    2018-2019-2 20165210<网络对抗技术>Exp9 Web安全基础 实验目的 本实践的目标理解常用网络攻击技术的基本原理. 实验内容 安装Webgoat SQL注入攻击 - ...

  5. Linux设备驱动程序 之 后备高速缓存

    设备驱动程序常常会反复的分配很多相同大小的内存块:内核实现了后备高速缓存来对此进行支持,以反复的使用这些相同的内存块: 创建 Linux内核的高速缓存管理有时被称为“slab分配器”:因此,相关函数和 ...

  6. 009-DNS域名解析系统

    一.概述 DNS是域名系统(DomainNameSystem)的缩写,该系统用于命名组织到域层次结构中的计算机和网络服务.域名是由圆点分开一串单词或缩写组成的,每一个域名都对应一个惟一的IP地址,在I ...

  7. powershell命令教程

    启动 powershell #字符串操作 对象操作 "hello".Length #进程操作 PS C:\> notepad PS C:\> $process=get- ...

  8. OpenGL学习(4)——纹理

    拖了半个多月的博客,这次学习如何使用纹理(Texture)贴图来实现更多的细节. 生成纹理对象 和创建VAO.VBO方法类似,调用glGenTextures函数. glGenTextures(1, & ...

  9. TensorFlow.环境_avx2

    1.缘由: 按照之前的步骤,在Win10的笔记本上就是不行: 1.1.jupyter notebook的相关界面,如下图所示: ZC:感觉 应该还是 tensorflow的问题 1.2.然后 各种测试 ...

  10. OpenGL.Qt551.问题

    1.Qt551 + vs2013 + Win7x64 缘由:将“教程14:渲染到纹理.html(http://www.opengl-tutorial.org/cn/intermediate-tutor ...