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 ...
随机推荐
- ZR#956 集合
ZR#956 集合 解法: 维护一个异或操作的懒标记,并对应的处理插入.删除和异或操作.接下来考虑如何整体加一. 考虑一个数字 $ x $ 变为 $ (x+1) \pmod {2^{30}} $ 的过 ...
- Linux设备驱动程序 之 中断和锁
中断和锁 1. 硬中断和软中断(包括tasklet和timer)共享数据,硬中断中使用spin_lock/spin_unlock,软中断中使用spin_lock_irq/spin_unlock_irq ...
- Resend a Request by fiddler
Resend a Request You can resend a request directly from the Sessions List, or save requests to resen ...
- Flutter移动电商实战 --(37)路由_Fluro引入和商品详细页建立
https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 fluro: ^1.4.0 如果网络上下载不 ...
- java中json的使用和解析
1.创建json对象 1.1 创建JSONObject对象 使用map初始化json @Test public void test1() { Map<String, Object> map ...
- 解决阿里云轻量级服务器mysql无法用数据库操作软件连接
第一步:去阿里云购买一台轻量应用服务器Lamp然后登录到控制台点击应用详情 点击后你可以看到一些服务器的数据 首先是访问服务器的首页地址,默认会放一个html文件在网站根目录下(即/home/www/ ...
- C++ STL 排序查找最大的5个
#include <iostream>#include <algorithm>#include <deque>#include <vector>#inc ...
- fidder修改参数
进入截栏模式 inspectors,webfroms run
- JavaScript 检测值
了解常见的真值和假值,可以增强判断能力.在使用if判断时,提升编码速度. 了解常见的检测和存在,一样可以增强判断能力,而且是必须掌握的. 数组和对象被视为真值 1 2 3 4 5 6 7 8 9 10 ...
- 软件测试工具LoadRunner常见问题
1.LoadRunner录制脚本时为什么不弹出IE浏览器? 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到不能打开浏览器的情况,可以用下面的方法来解决. 启动浏览器,打开Inter ...