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. React的基本认识

    1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2.  介绍描述 1) 用于构建用户 ...

  2. MATLAB实现模糊控制

    一.简介 MATLAB软件有提供一个模糊推理系统编辑器,利用模糊工具箱在matlab命令窗口输入Fuzzy命令进入模糊控制编辑环境 二.主要步骤 1.接受输入变量 2.输入变量模糊化 3.利用模糊规则 ...

  3. SOA(面向服务的架构)初识

    SOA是一种设计方法,其中包含多个服务,而服务之间通过配合最终会提供一系列功能.一个服务通常以独立的方式存在于操作系统中.服务之间通过网络调用(常见有http+xml.http+json等),而非进程 ...

  4. sed中使用变量及变量中存在特殊字符‘/’处理

    sed中使用变量,普通的处理方式无法解析变量 如当前file文件中存在字符串pedis,现将其替换为redis [root@localhost work]# cat file pedis 如下两种替换 ...

  5. CentOS7下安装php-redis扩展

    yum -y install php70w-pecl-redis

  6. linux上安装phpstudy

    摘要:安装:wget-chttp://lamp.phpstudy.net/phpstudy.bin chmod+xphpstudy.bin  #权限设置./phpstudy.bin#运行安装用时十到几 ...

  7. js的event详解

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromElement ...

  8. 利用工具破解HTTP身份验证的多种方法

    https://www.hackingarticles.in/multiple-ways-to-exploiting-http-authentication/ 1)场景 利用Apache配置HTTP验 ...

  9. python中Requests的重试机制

    requests原生支持 import requests from requests.adapters import HTTPAdapter s = requests.Session() # 重试次数 ...

  10. Linux操作系统使用RPMBUILD命令打包RPM的详细步骤

    首先,我们需要了解一些预备知识,在旧版本的CentOS中,rpmbuild工具默认的工作路径是/usr/src/redhat,因为权限原因,一般用户身份不能制作rpm软件包,只能切换到root身份才能 ...