vue项目build 之后,css文件加载图片或者字体文件时404的解决。
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的解决。的更多相关文章
- 在IIS上新发布的网站,样式与js资源文件加载不到(资源文件和网页同一个域名下)
在IIS上新发布的网站,网站能打开,但样式与js资源文件加载不到(资源文件和网页是同一个域名下,例如:网页www.xxx.com/index.aspx,图片www.xxx.com/pic.png). ...
- Android之com.nostra13.universalimageloader加载图片抛出OutOfMemroyError错误的多种解决办法
com.nostra13.universalimageloader是用来加载图片非常好的框架,但是也有问题,一旦图片过多的话,很容易就会提示OutOfMemroyError错误,也就是内存溢出的问题, ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
- MVC项目发布IIS CSS无法加载
IIS配置网站在本地服务器调用不了CSS,新装了一个WIN8系统,IIS配置好之后做好的网站样式表浏览器不调用 处理方法 : 把静态内网 勾选打上即可 如果上述方法操作完成还是访问不鸟就继续往下看 权 ...
- vue项目优化之路由懒加载
const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...
- vue 项目打包后静态资源加载不到
1, 2,
- js操纵css更改加载图片大小
- 前不久一个swift项目用uicollectionview 用sdwebimage 加载图片,发生内存猛增,直接闪退的情况,简单说一下解决方案。
1.首先在appdelegate方法 didFinishLaunchingWithOptions SDImageCache.sharedImageCache().maxCacheSize=1024*1 ...
随机推荐
- cas系列-cas server demo搭建(二)
一 部署简述 cas server官方推荐采用overlay方式进行部署,通过替换自定义文件,减少项目文件改动,以简化开发和部署,这个有点类似于项目上直接替换java的class文件,由于和git的搭 ...
- manjaro 18.10 install soft
1.添加新账户 useradd username新建账户; useradd -d /home/xxx -m xxx创建用户,并同时生成用户目录,不然账户无法正常启用; passwd username修 ...
- 2018-2019-2 20165210《网络对抗技术》Exp7 网络欺诈防范
2018-2019-2 20165210<网络对抗技术>Exp7 网络欺诈防范 一.实验目标:本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 二.实验内容: ...
- ccf 201803-3 URL映射(python)
使用正则表达式 import re import collections n, m = list(map(int, input().split())) arr = ['']*(m+n) for i i ...
- centos 开启关闭网卡
ifdown ifcfg-enp7s0 关闭网卡 ifup ifcfg-enp7s0 开启网卡
- 001-jdk-数据结构-总览
一.集合类简介 1.1.背景 数组是很常用的一种的数据结构,用它可以满足很多的功能,但是,有时会遇到如下这样的问题: 1.需要该容器的长度是不确定的. 2.需要它能自动排序. 3.需要存储以键值对方式 ...
- delphi中Treeview的使用介绍
今天重点学习了TreeView的使用方法,基本的已经写了,现在主要想说的是如何显示数据库的资料,今天只是做了个较简单的例子,一个父节点下显示数据库中某个field的值.代码如下: procedure ...
- JDBC获得DB2表结构并且将表中数据脱敏后转移的程序示例
完整项目地址:https://github.com/zifeiy/totomi 代码示例: import java.io.File; import java.io.FileInputStream; i ...
- jeecg启动报错“com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection to database server.”的解决办法
在运行"maven build"-->"tomcat:run"之后,报如下错误: com.mysql.jdbc.exceptions.jdbc4.MySQ ...
- LAG函数实现环比
,)OVER(ORDER BY 年月) 环比金额 from( 年, 季度, 年月 ,SUM(金额本位币) 金额 FROM ( SELECT * FROM [dbo].[T_output] ) cb_v ...