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 插件打开,发现整个打包后的效果就可以查看了,这时候浏览器的资源项也是正确的了

总结

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

相关推荐
ywf12152 分钟前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭9 分钟前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf6 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特6 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷7 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian7 小时前
前端node常用配置
前端
monsion7 小时前
OpenCode 学习指南
人工智能·vscode·架构
华洛7 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq8 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A9 小时前
vue css中 :global的使用
前端·javascript·vue.js