博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue感悟:解决编译过后在本地直接打开,找不到css或者背景图片的问题
阅读量:6095 次
发布时间:2019-06-20

本文共 636 字,大约阅读时间需要 2 分钟。

使用vue-cli开发的项目,编译过后在本地打开常常会出现找不到css文件,或者找不到在css中使用background-image定义的背景图片,打开项目会发现是路径出现了错误。

这时我们需要为css文件单独配置publicPath参数。

第一步,找到在config文件夹中的index.js文件,里面有一个build对象,将其中assetsPublicPath的配置从 '/’ 改为 './',这已经可以解决找不到css资源或者js资源的问题。

这时会发现使用background-image定义的背景图片任然有问题。

第二步:找到build文件夹中的utils.js文件,里面对外抛出了一个cssLoaders函数,该函数中定义了一个generateLoaders函数,这个函数中使用了ExtractTextWebpackPlugin来配置解析css的loader,原始的状态是这样的:

这时再配置一下publicPath:

这个时候就已经解决了找不到css文件或者找不到background-image定义的背景图的问题。

注意:publicPath:‘../../’,适用在.vue格式文件的style标签中使用的样式,在开发中需要根据你自己的文件结构,动态配置,在这就不过多赘述。

tips:毕业2年来,也从事了2年的前端工作,这是我2年来第一次写东西,想着尝试把自己一些心得分享出来,可能说的啰嗦,繁琐,请见谅啦,有错误的地方欢迎指正,希望和大家一起进步!!

转载地址:http://ddzza.baihongyu.com/

你可能感兴趣的文章
前端快速入门 TCP/IP
查看>>
python中对文件的操作
查看>>
前端必须掌握的知识之Http协议基础以及发展进程
查看>>
Debian 操作系统的包管理器 dpkg 和 apt-get
查看>>
[小团队自动化] 基于 Gitea+Drone CI+Vault 打造属于自己的CI/CD工作流
查看>>
VUEX应用
查看>>
Java虚拟机垃圾回收相关知识点全梳理(上)
查看>>
今天我们来种一棵"树"
查看>>
快速排序
查看>>
async/await 来处理异步
查看>>
Android Wear(Wear OS)开发
查看>>
简单工厂模式
查看>>
Linux配置SSH免密登陆(公私钥登陆)
查看>>
mysql索引机制理解学习总结
查看>>
妈妈我想你了,
查看>>
Day3--练习MySQL基础语句
查看>>
乖乖兽-减肥掌握这三点,轻松一整年
查看>>
Java直接内存原理
查看>>
c++面向对象的一些问题1 0
查看>>
直播视频流技术名词
查看>>