Vscode 中新手小白使用 Open With Live Server 的坑

背景

最近在家学习尝试前端项目打包的一些事项,既然是打包,那么肯定就会涉及到对打包后文件的访问,以直观的查看打包后的效果

那么肯定就会使用到 Vscode 中 Open With LIve Server 这个功能了,首先这个是一个叫 Live Server 的插件提供的能力,使用之前需要先安装插件,安装插件之后就可以使用了

使用报错,提示文件找不到

一切准备就绪,然后对搭建的项目进行打包,成功打包后一般会在项目的根目录下生成一个 dist 的文件夹,问价夹里就是打包后的全部东西,然后我找到 dist 文件下的 index.html 的入口文件,通过 Open With LIve Server 的方式将其打开在浏览器中访问想看看效果,但是发现其报错了,报错如下:

报错的问题就是没有找到 /static 这个路径下的资源,于是自己就去查看了打包的 dist 文件夹,发现所有的文件资源都是齐全的,index.html 文件中对资源的应用路径也都是正确的,如下图:

index.html 中的资源引入路径:

static文件中的资源:

然后自己就排查了一番,发现浏览器访问 Live-Server 插件本地启动服务时,资源项中只有 index.html 文件,并没有 static 文件夹里面的静态资源,如下图:

所以报错是肯定的

解决办法

发现报错后,换了一起思路,就是将整个 dist 文件通过 Live-Server 插件打开,发现整个打包后的效果就可以查看了,这时候浏览器的资源项也是正确的了

总结

其实问题很小,就是打开方式不对,但是对于新手来说还是有一定的迷惑性,所以写一下,希望能对大家有帮助

相关推荐
wuxia21185 小时前
微信小程序单击元素切换元素的显示和隐藏
javascript·微信小程序·setdata
JustHappy5 小时前
古法编程秘籍(二):什么是代码模块化?别背概念,把房间收拾明白就够了
前端·后端
小江的记录本5 小时前
【JVM虚拟机】堆内存分代模型:年轻代(Eden+Survivor)、老年代、元空间Metaspace(附《思维导图》+《面试高频考点清单》)
java·前端·jvm·后端·python·spring·面试
weixin_471383035 小时前
图片预解码缓存
前端·浏览器缓存·图片预解码
一起学开源5 小时前
一文读懂 ReAct 范式:让 AI Agent 真正学会“思考+行动“
java·javascript·react.js·ecmascript·react·alibaba·智能体开发
郑洁文7 小时前
基于网络爬虫的Web敏感信息泄露自动化检测工具
前端·爬虫·网络安全·自动化
游九尘7 小时前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app
zhiSiBuYu05177 小时前
Claude-Code 新手极速上手指南
javascript·node.js
郑洁文7 小时前
可视化Web渗透分析工具的设计与实现
前端
罗超驿8 小时前
18.Web API 实战:元素与表单属性的获取和修改
开发语言·前端·javascript