如何在Node.js（Express）中为EJS页面引入游戏逻辑JS文件

嘿，别担心，这个问题其实是静态资源的存放路径没搞对，跟把JS转模块没关系～ 我来给你一步步理清楚：

问题根源 #

你用app.use(express.static("public"))告诉Express：所有客户端需要的静态资源（CSS、JS、图片等）都从public文件夹里找。但你把CSS和游戏逻辑JS都放在了views文件夹里——views是用来放EJS模板文件的，Express不会把这里的文件当作静态资源对外提供，所以当浏览器请求这些文件时，服务器找不到，就返回了cannot GET错误。

解决方案 #

1. 调整文件夹结构

把colorGame.css和colorGameLogic.js从views文件夹移动到public文件夹里。调整后的结构应该是这样：

你的项目根目录
├── node_modules/
├── public/
│   ├── colorGame.css
│   └── colorGameLogic.js
├── views/
│   ├── home.ejs
│   └── colorGame.ejs
├── app.js （你的Node.js代码文件）
└── package.json

2. 修正EJS里的资源引用路径

打开colorGame.ejs，把CSS的引用路径加上根路径斜杠（确保从public文件夹开始查找）：

<link rel="stylesheet" href="/colorGame.css">

JS的引用路径已经是/colorGameLogic.js，这个不用改，因为现在文件已经在public里了，Express会正确找到它。

（可选）优化静态资源结构

如果你的静态资源越来越多，建议在public里建子文件夹分类存放，比如：

public/
├── css/
│   └── colorGame.css
└── js/
    └── colorGameLogic.js

对应的引用路径就改成：

<link rel="stylesheet" href="/css/colorGame.css">
<script src="/js/colorGameLogic.js"></script>

这样项目结构会更清晰，后期维护也方便。

验证一下 #

重启你的Node服务器，再访问/ColorGame页面，应该就能正常加载CSS和游戏逻辑JS了，不会再出现cannot GET错误啦～

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