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. csp-s模拟99

    考前10天了... 昨天晚上真的不清醒,什么也码不对,心态爆炸. T1调了一个多小时没出来,T2因为少了一出q.pop()没A掉,T3随便写了几个sort竟然A了.十分懵逼. 最后20分钟想调T1,结 ...

  2. PyTricks-json dumps优雅的输出字典

    import json my_mapping = {'a': 23, 'b': 42, 'c': 0xc0ffee} print(json.dumps(my_mapping, indent=4, so ...

  3. Jmeter Web 性能测试入门 (二):Fiddler 抓取 http/https 请求

    jmeter自带了拦截request的功能,并且也有对应的tool:badboy 可以用.但由于我经常做移动端的项目,个人还是习惯用fiddler来收集request. 官网下载并安装Fiddler ...

  4. 获得数据源和路径desc.catalogPath

    workspace:C:\Users\dell\Documents\ArcGIS\Default.gdb\ddf inPath:c:\users\dell\documents\arcgis\defau ...

  5. Swift 数据类型

    Swift 提供了非常丰富的数据类型,以下列出了常用了几种数据类型: Int 一般来说,你不需要专门指定整数的长度.Swift 提供了一个特殊的整数类型Int,长度与当前平台的原生字长相同: 在32位 ...

  6. exactly the kind of division of tasks that Gulp.js is built on

    The results are then passed to a reporter function that displays the results of the code analysis in ...

  7. 使用浏览器连接Linux服务器

    wssh 可以让我们通过 HTTP 来调用远程的一个 shell,也就是说我们可以用浏览器来访问某个 Linux 服务器/虚拟机的终端(只要这个服务器上运行了 wsshd 服务器端).wssh 客户端 ...

  8. 通过举例了解java中的流

    Java流结构介绍: Java所有的流类位于java.io包中,都分别继承字以下四种抽象流类型.   字节流 字符流 输入流 InputStream Reader 输出流 OutputStream W ...

  9. Spring Aop(一)——Aop简介

    转发地址:https://www.iteye.com/blog/elim-2394629 1 Aop简介 AOP的全称是Aspect Oriented Programming,翻译成中文是面向切面编程 ...

  10. Hadoop 部署之 ZooKeeper (二)

    目录 一.Zookeeper功能简介 二.ZooKeeper基本概念 1.集群角色 三.ZooKeeper 的安装 1.下载安装(在datanode节点安装) 2.配置ZooKeeper环境变量 3. ...