手动添加Vite后React应用运行报错，求解决方法

核心问题分析 #

你遇到的两个错误本质上都是没搞懂Vite的工作逻辑：

1. Live Server报错：Live Server只是静态文件服务器，它无法识别.jsx文件的模块类型，会把它当成普通文本返回，导致浏览器解析失败。Vite本身自带能编译JSX、处理模块依赖的开发服务器，根本不需要用Live Server。
2. npm start报错：你把start脚本写成node scripts/index.jsx完全错误——Node.js原生不支持JSX语法，而且Vite的启动命令是vite，不是直接运行入口文件。

一步步解决 #

1. 安装React核心依赖

你目前只装了Vite和React插件，还缺React和ReactDOM，先补装：

npm install react react-dom

2. 修正package.json的scripts

把scripts改成下面这样，start脚本用Vite启动开发服务器：

{
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.1.6"
  }
}

3. 更新index.jsx代码

去掉全局的ReactDOM引用，改成从本地依赖导入，同时确保组件路径正确：

import ReactDOM from 'react-dom/client';
import Header from "./Header.js"; // 假设Header.js和index.jsx同属scripts文件夹

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page/>);   

function Page() {
    return(
        <div>
            <Header/>
            {/* <MainContent>
                <Card/>
            </MainContent>
            <Footer/> */}
        </div>
    )
}

注意：如果你的Header文件是JSX语法，建议改成Header.jsx，导入路径也对应调整为./Header.jsx，Vite会自动识别处理。

4. 简化index.html

删掉CDN的React、ReactDOM和Babel脚本——Vite会自动处理这些依赖和JSX编译：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A Minimal React App</title>
    <!-- <link rel="stylesheet" href="index.css"> -->
</head>
<body>
    <div id="root"></div> 
    <script type="module" src="/scripts/index.jsx"></script>       
</body>
</html>

5. 启动项目

现在直接在命令行运行：

npm start

Vite会启动开发服务器（默认地址http://localhost:5173），自动打开浏览器，你的React应用就能正常运行了。

额外提示 #

• 项目结构建议：通常Vite项目会把源码放在src文件夹下，你可以把scripts改成src，更符合行业规范。
• 生产构建：运行npm run build，Vite会把代码打包到dist文件夹，直接部署这个文件夹即可。

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