前端项目仅能通过Live Server扩展打开，脱离后样式丢失如何解决

直接双击打开本地HTML文件时，浏览器使用file://协议加载资源，该协议默认禁用跨域资源请求、特殊路径解析规则和HTTP服务下的MIME类型校验，会导致CSS、图片、JS等资源加载被拦截。而Live Server本质是在本地启动了一个轻量化HTTP服务，走http://127.0.0.1协议，完全符合浏览器的资源加载规则，因此可以正常运行。

方案1：修正资源引用的相对路径（无特殊依赖的小型项目首选） #

• 所有CSS、图片、JS的引用不要使用以/开头的绝对路径，这类路径在HTTP服务下指向项目根目录，但在file://协议下会指向磁盘根目录，无法匹配到对应资源。
• 统一使用相对于入口HTML文件的相对路径：例如入口HTML放在项目根目录，CSS文件存放在根目录下的css文件夹中，引用路径写css/style.css即可；如果HTML文件存放在page子文件夹，CSS存放在同级的css文件夹中，引用路径写../css/style.css。
• 所有资源文件和路径中不要出现中文、空格、特殊符号，避免浏览器编码解析失败。

方案2：本地启动轻量化HTTP服务（有接口请求、ES Module导入等依赖的项目首选） #

如果项目存在跨域接口请求、ES Module导入等必须依赖HTTP服务的功能，仅修改路径无法解决，可以用以下任意一种方式快速启动本地服务，不需要安装VS Code和Live Server扩展：

Node.js环境 #

• 全局安装http-server工具：npm install -g http-server
• 打开终端进入项目根目录，执行命令：http-server
• 访问终端输出的本地服务地址（默认是http://127.0.0.1:8080）即可正常加载所有资源

Python环境 #

• Python3环境下，终端进入项目根目录执行：python -m http.server 8080
• Python2环境下执行：python -m SimpleHTTPServer 8080
• 访问http://127.0.0.1:8080即可

方案3：打包为单文件HTML（需要对外分发演示的项目首选） #

如果需要把项目发给其他人无需启动服务直接打开，可以将所有CSS代码内联到HTML的<style>标签中，所有图片转成Base64编码嵌入到对应位置，所有JS代码内联到<script>标签中，打包后的单个HTML文件直接双击即可正常展示所有效果。

内容的提问来源于stack exchange，提问作者genius karti