Express基础服务器无法加载静态JS文件问题求助

1. 核对文件目录结构 #

你的Express配置里指定了public作为静态资源目录：

app.use(express.static(__dirname + '/public'));

所有静态文件（HTML、JS、CSS）必须放在public目录下，正确的目录结构应该是这样：

你的项目文件夹
├── index.js
└── public
    ├── index.html
    └── login.js

如果文件不在这个结构里，Express找不到对应资源，就会返回404错误。

2. 补全路由配置（可选，若不依赖静态文件直接访问） #

你设置了ejs作为模板引擎，但没有编写根路由返回HTML文件。如果你的index.html不在public目录下，需要在index.js里添加路由：

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

注：如果想用ejs模板，应该把文件命名为index.ejs并放在views目录下，再用res.render('index')返回页面。

3. 修复JS文件的语法问题 #

你的login.js里用了JSX语法（<>），普通浏览器不支持这种语法，必须依赖React或转译工具才能运行。改成原生JS写法即可：

function login() {
  const para = document.createElement('p');
  para.textContent = 'hi';
  return para;
}

如果一定要保留JSX，需要在HTML中引入React、ReactDOM和Babel的CDN，并修改script标签的type：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="/login.js" type="text/babel"></script>

4. 修正script标签的路径 #

在index.html中，script的src要用绝对路径开头（加斜杠），避免相对路径跳转出错：

<script src="/login.js" type="text/javascript"></script>

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