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中的 ...
随机推荐
- NATS—协议详解(nats-protocol)
NATS的协议是一个简单的.基于文本的发布/订阅风格的协议.客户端连接到 gnatsd(NATS服务器),并与 gnatsd 进行通信,通信基于普通的 TCP/IP 套接字,并定义了很小的操作集,换行 ...
- 指针delete之后赋值为null
1.现象 经常看到有些代码在delete之后赋值为null 2.原因 C++标准规定:delete空指针是合法的,没有副作用. 所以我们在Delete指针后赋值为NULL或0是个好习惯.对一个非空指针 ...
- iOS开发 -------- UITableView的编辑
一 核心API Class: UITableView Delegate: UITableViewDataSource, UITableViewDelegate 涉及到的API: 插入和删除 1 /** ...
- emmc和ssd的区别【转】
本文转载自:https://blog.csdn.net/hawk_lexiang/article/details/78228789 emmc和ssd eMMC和SSD主要是满足不同需求而发展出来的NA ...
- Flash Memory 简介【转】
本文转载自:https://linux.codingbelief.com/zh/storage/emmc/ Flash Memory 是一种非易失性的存储器.在嵌入式系统中通常用于存放系统.应用和数据 ...
- linux内核中的vgaarb是什么?
答: vga仲裁器(vga arbiter),是内核中的一个模块
- How to know the directory size in CENTOS 查看文件夹大小
Under any linux system, you want to use the command du. (Disk Usage) Common usage is : du -sh file(s ...
- EPPlus实战篇——Excel读取
.net core 项目 可以从excel读取任何类型(T)的数据,只要T中的field的[Display(Name = "1233")]中的name==excel column ...
- linux lsof/netstat查看进程和端口号相关命令:
本文为博主原创,未经允许不得转载: 在linux操作时,经常要查看运行的项目的进程和端口号,在这里总结了以下常用到的相关命令: 1.查看系统运行的java项目,并查看进程号 这个用到的命令为: ps ...
- module.exports 与 exports
module.exports 与 exports 注意:1 对于要导出的属性,可以简单直接挂到 exports 对象上2 对于类,为了直接使导出的内容作为类的构造器可以让调用者使用 new 操作符创建 ...