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

总结

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




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。