为何无法使用Live Server部署React应用？

核心差异在于协议环境、资源路径解析逻辑和路由处理机制这三点，和React是否是客户端应用无关——客户端应用的正常运行也依赖特定的服务器环境支持：

1. 协议类型的本质区别 #

直接打开HTML文件用的是file://本地文件协议，而webpack/vite/Express提供的是http://或https://网络协议：

• file://协议没有服务器端的路径映射、路由转发等能力，仅能读取本地文件系统的资源；
• HTTP协议下，服务器会将请求的路径映射到项目的打包目录（比如dist），确保资源加载路径正确。

2. 资源路径解析逻辑不同 #

React打包后，HTML中的JS/CSS资源引用通常是绝对路径（比如<script src="/static/js/main.xxx.js"></script>）：

• 用file://打开时，/会被解析为本地文件系统的根目录（比如Windows的C:\、Mac的/），而不是你的项目打包目录，导致浏览器找不到资源；
• HTTP服务器会将根路径/映射到打包后的dist目录，所以绝对路径能正确指向dist/static/js/xxx.js。

3. 路由处理的差异（React Router场景） #

如果你的React项目用了BrowserRouter（history模式路由），直接打开或用未配置的Live Server会出现路由访问失败：

• 当你直接访问/about这类路由时，file://协议会试图在本地找about文件夹或文件，显然不存在；
• 专业的HTTP服务器（比如Express、Vite预览服务）会配置重定向规则，把所有路由请求转发到index.html，让React在客户端接管路由逻辑。比如Express的配置：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

// 所有路由请求转发到index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000);

关于Live Server的特殊情况 #

部分Live Server工具可能默认没有配置React所需的路由转发，或者没有将根目录设置为打包后的dist文件夹，导致资源路径错误或路由失效。如果要让Live Server可用，需要：

• 将Live Server的根目录设置为打包后的dist目录；
• 配置Live Server支持路由重定向（部分工具需要手动添加自定义规则）。

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