React项目Script标签路径问题求助：相对/绝对路径均失效

兄弟，你踩了一个React新手常犯的坑——React项目（尤其是用Create React App初始化的）根本不是静态HTML直接引用JS文件的玩法，它靠webpack这类打包工具处理代码，你手动在index.html里写<script>标签引用src下的index.js，肯定行不通的。我给你一步步理清楚怎么解决：

先搞懂核心逻辑 #

当你用npm完成React安装（应该是用npx create-react-app初始化的项目吧？），src/index.js是项目的源码入口，但它不会直接被public/index.html引用。webpack会把src里所有代码打包成浏览器能识别的静态资源，然后自动把打包后的JS文件注入到index.html里——你完全不需要手动加<script>标签！

默认的public/index.html里已经有个特殊占位符%PUBLIC_URL%，打包的时候webpack会自动替换成正确的资源路径，你别瞎改这个。

检查你的项目结构 #

先确保你的项目结构是标准的：

你的项目文件夹/
  public/
    index.html
  src/
    index.js
  package.json

正确的运行姿势 #

别直接双击打开public/index.html！在项目根目录打开终端，运行：

npm start

这个命令会启动开发服务器，webpack会实时打包你的代码，然后你打开浏览器访问http://localhost:3000，就能看到你的React应用了。

如果你删了默认文件，要补全基础代码 #

如果你把默认的示例文件删了，得确保src/index.js里有最基础的渲染代码，比如：

import React from 'react';
import ReactDOM from 'react-dom/client';

// 找到index.html里的root节点，挂载React内容
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <h1>Hello React！终于跑起来了😎</h1>
  </React.StrictMode>
);

同时public/index.html里必须有个id为root的div，不然React没地方挂载：

<div id="root"></div>

关于VS Code路径识别错误的问题 #

你说VS Code把index.html识别成index.js，提示路径不存在——这是因为你试图引用的是未打包的源码，VS Code的路径提示没适配React的打包逻辑。等你按照正确方式用npm start运行项目后，这个问题就不存在了，因为你根本不需要手动写那个<script>标签！

总结一下：React是打包运行的，不是静态页面直接引用JS，别手动加script标签，用npm start启动开发服务器就对了。

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