vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图:
写法:

错误:

会无端多出一个“/css/static/” 这样就会使路径错误;
解决办法:
办法一:
把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径;
具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译)
办法二:进行wepack配置:
第一步:

第二步:

第三步:

然后 npm run build 运行打包就OK了
具体原因:自己研究,拜拜!!周五快乐!!!!!!
vue cli 打包项目造成css背景图路径错误的更多相关文章
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题
[解决方法]: 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置. if (options.extract) { return ExtractTex ...
- vue.js 打包时出现空白页和路径错误
vue-cli输入命令:npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
随机推荐
- Android之单元测试及数据库操作
一.安卓下的单元测试1.创建一个单元类,继承超类AndroidTestCase2.在AndroidManifest.xml配置清单中配置以下两点首先在manifest节点下添加节点instrument ...
- bash 特性
命令hash: 缓存此前命令的查找结果:key-value key:搜索键 value:值
- QML中打印
1.console.log("123"); 2.console.log("a is ", a, "b is ", b); 3.打印代码块时间 ...
- Bootstrap3基础 input-group glyphicon 输入框组与glyphicon图标
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- upc组队赛1 过分的谜题【找规律】
过分的谜题 题目描述 2060年是云南中医学院的百年校庆,于是学生会的同学们搞了一个连续猜谜活动:共有10个谜题,现在告诉所有人第一个谜题,每个谜题的答案就是下一个谜题的线索....成功破解最后一个谜 ...
- fedora23 桌面工具栏fedy, 桌面美化 allow: 2'lau不是2'l2u
## Sudoers allows particular users to run various commands as ## the root user, without needing the ...
- Spring Security原理与应用
Spring Security是什么 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置 ...
- R t-test cor.test
a = c(175, 168, 168, 190, 156, 181, 182, 175, 174, 179)b = c(185, 169, 173, 173, 188, 186, 175, 174, ...
- P4450 双亲数
思路 同zap-queries 莫比乌斯反演的板子 数据范围小到不用整除分块... 代码 #include <cstdio> #include <algorithm> #inc ...
- (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块
在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB ...