VS Code项目不启动Live Server就无法打开网页该如何修复？

核心原因 #

该问题由Live Server运行的http服务协议，和本地打开文件用的file协议的路径解析规则、能力支持差异导致，按以下方案调整即可解决：

具体解决方案 #

• 修正资源引用路径：所有/开头的项目根路径绝对引用全部改为相对路径，比如将/js/main.js改为./js/main.js。如果是框架项目，打包时配置公共路径为相对路径：
  • Vue项目在vue.config.js中添加配置：publicPath: './'
  • React项目在package.json中添加字段："homepage": "."
• 补全ES模块导入后缀：原生ES模块导入语句要补全完整文件后缀，把import util from './util'修改为import util from './util.js'，file协议不会自动补全模块后缀进行解析。
• 适配协议限制：
  • 若存在fetch/XMLHttpRequest请求本地静态资源的逻辑，file协议会触发跨域限制，可将对应资源内容直接内嵌到HTML/JS中，不需要走请求逻辑
  • 若使用了前端路由，将history模式改为hash模式，history模式依赖服务端配置路由 fallback，本地file协议不支持该能力
• 轻量替代服务方案：如果项目功能确实依赖http协议运行，不需要启动VS Code也可以启动临时静态服务：
  • macOS/Linux系统：在项目根目录打开终端，执行python3 -m http.server 8000即可启动静态服务，访问http://localhost:8000即可查看页面
  • Windows系统：可直接开启系统自带的IIS服务，将站点根目录指向项目文件夹即可

验证方式 #

所有调整完成后，直接双击项目根目录的入口HTML文件，即可在浏览器中正常加载页面全部功能。

内容的提问来源于stack exchange，提问作者Umer Shabir