vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题
奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了。
稍微查了一些资料,发现是webpack自身问题。在webpack中,js和css引入资源的路径是不一样的,js是以调用的位置决定的,而css是以自身的位置决定的,这就导致了css的资源多套了一到多层。
在vue项目中,解决方法也炒鸡简单,只需改一下配置即可:
//build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //多添加这一句,具体的相对路径根据自己的项目路径而定
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue webpack 打包后css背景图路径问题的更多相关文章
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue打包后css背景图片地址找不到
背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加 publicPath: '../../' 就行 对比了下,com ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
随机推荐
- 【2019北京集训2】duck 线段树优化建图+tarjan
题目大意:给你$n$个点,第$i$个点有点权$v_i$.你需要将这$n$个点排成一排,第$i$个点的点权能被累加当且仅当这个点前面存在编号在$[l_i,r_i]$中的点,问你这些点应该如何排列,点权和 ...
- GCC C语言 DLL范例,含源码
作者:小白救星 编译:gcc -c -DBUILDING_HZ_DLL1 hzdll1.c gcc -shared -o hzdll1.dll hzdll1.o -Wl,--kil ...
- 浏览器中F5和CTRL F5的行为区别及如何强制更新资源
一.浏览器中F5和CTRL F5的行为区别 我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别. F5: CTRL F5: 区别: 首先直观上的区别是CTRL F5明显 ...
- iOS 8.0 bluetooth peripheral manager giving no callback for addService
I am adding the service using: [self.peripheralManager addService:myService]; Is this method depreca ...
- 解析BroadcastReceiver之你需要了解的一些东东
前些天把四大组件之一的Service扯了一遍,今天就要开始谈谈它的弟兄BroadcastReceiver了.写到这里我挺纠结的,因为广播接收者确实比较简单,但是各位就不要以为简单的就不内涵,也许我们慢 ...
- 分步理解 Promise 的实现
一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var ...
- Spring Actuator源码分析(转)
转自:http://blog.csdn.net/wsscy2004/article/details/50166333 Actuator Endpoint Actuator模块通过Endpoint暴露一 ...
- Tomcat学习总结(15)—— Tomcat优化时的参数分析
(1).maxHttpHeaderSize=”8192” 此选项用于配置:来自于客户端请求的Request和Response的HTTP header 的最大长度,以字节计算.如果不设置,该属性为409 ...
- TensorFlow-实战Google深度学习框架 笔记(上)
TensorFlow TensorFlow 是一种采用数据流图(data flow graphs),用于数值计算的开源软件库.在 Tensorflow 中,所有不同的变量和运算都是储存在计算图,所以在 ...
- AutoMapper之集合和数组映射
9.集合和数组映射 在项目中,集合和数组使用的很多的,继续下来就讲讲他们的映射,很简单. /// <summary> /// 源对象 /// </summary> public ...