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. HTML页面预览表格文件内容

    背景简介 在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中 vue项目 第三方 exceljs 安装 npm install exceljs 插件使用 github 中文文 ...

  2. 查询Oracle正在执行的sql语句及kill被锁的表

    查询Oracle正在执行的sql语句及执行该语句的用户SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, pa ...

  3. 重读APUE(3)-dup与文件表项

    下图为调用dup之后的文件指针状态,包含如下信息: 1. dup选择了一个最小的未使用的描述符3: 2. dup(1)之后,描述符1和描述符3指向同一个文件表项: 3. dup(1)的返回值即为复制得 ...

  4. How to Publish a NuGet Package

    How to Publish a NuGet Package Command line To push packages to nuget.org you must use nuget.exe v4. ...

  5. hbase部署经验与坑总结

    1.本地单机部署hbase,想要使用独立zookeeper,不使用自带的 vim conf/hbase-env.sh export HBASE_MANAGES_ZK=false 设置不使用自带zook ...

  6. windows下xampp安装rabbitmq的PHP扩展AMQP

    windows上使用的php扩展为dll文件,首先去下载dll文件,可以到 https://pecl.php.net/package/amqp 选择对应的版本下载 下载压缩包解压后,把里面的两个dll ...

  7. C之指针

    什么是指针 * 指针变量:用来存储某种数据在内存中的地址.* 世面上书籍一般把指针和指针变量的概念混在一起了.市面上的书籍说的指针指的就是指针变量 Ø *号的三种含义1. 两个数相乘int i =5; ...

  8. Linux与linux之间传递文件、

    1.从linux本机文件上传到另一台linux格式:scp 要传的文件 root@目标ip:路径scp –r 要传的目录 root@目标ip:路径 例子: scp  /root/1.txt   roo ...

  9. MySQL中tinytext、text、mediumtext和longtext等各个类型详解

    转: MySQL中tinytext.text.mediumtext和longtext等各个类型详解 2018年06月13日 08:55:24 youcijibi 阅读数 26900更多 个人分类: 每 ...

  10. 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...