HTML按钮触发Node.js fs模块创建文件夹失效问题咨询

你的代码失效的本质原因是混淆了浏览器前端JS和Node.js后端JS的运行边界：

• 你写在script.js里用<script>标签引入的代码，最终是运行在用户的浏览器环境里。浏览器出于安全沙箱限制，既不支持Node.js的require()模块语法，也根本没有权限直接调用fs这类操作本地文件系统的API——你打开浏览器控制台就能看到明确报错：require is not defined。
• 你说“纯JS环境下功能正常”，是指直接用node 脚本名.js命令跑代码时，代码运行在Node.js运行时中，自然可以调用fs接口。但把同一段代码放到网页里跑，运行环境已经完全变了，二者是物理隔离的，不能直接互通。

如果完全不启动任何后端服务、仅靠本地静态HTML文件在浏览器中打开，不可能实现直接在项目src目录下创建文件夹的需求。
浏览器的安全机制从根源上禁止网页随意访问、修改本地文件系统的任意路径，这个限制没有绕过空间。你提到“不能用服务器环境”本身和你要用Node.js的fs模块是矛盾的：fs就是Node.js服务端专属的API，必须运行在Node.js服务进程中才能生效，Node.js本身就是后端服务运行环境。

你只需要把前后端逻辑拆分，不要把Node.js后端代码写到前端脚本里即可，不需要用PHP：

• 在项目根目录编写Node.js服务代码，启动一个本地HTTP服务，一方面负责返回前端页面资源，另一方面提供创建文件夹的接口，在接口内部调用fs.mkdirSync完成实际的文件操作
• 把前端按钮的点击逻辑改成调用后端接口，把用户输入的文件夹名通过请求传给后端
• 访问页面时不要直接双击打开本地HTML文件，通过Node.js服务的本地地址（比如http://localhost:3000）访问即可

最小可运行示例 #

首先在项目根目录新建server.js作为后端入口：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // 处理创建文件夹的接口
  if (req.method === 'POST' && req.url === '/create-dir') {
    let body = '';
    req.on('data', chunk => body += chunk);
    req.on('end', () => {
      const { dirName } = JSON.parse(body);
      const targetPath = path.join(__dirname, 'src', dirName);
      // 路径校验，防止路径遍历漏洞
      if (!targetPath.startsWith(path.join(__dirname, 'src'))) {
        res.statusCode = 400;
        return res.end('非法路径');
      }
      try {
        fs.mkdirSync(targetPath);
        res.end('文件夹创建成功');
      } catch (err) {
        res.statusCode = 500;
        res.end(`创建失败：${err.message}`);
      }
    })
    return;
  }

  // 处理静态资源返回
  const filePath = path.join(__dirname, 'src', req.url === '/' ? 'index.html' : req.url);
  fs.readFile(filePath, (err, content) => {
    if (err) {
      res.statusCode = 404;
      return res.end('资源不存在');
    }
    res.end(content);
  })
})

server.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
})

然后修改src/script.js，移除Node.js相关代码，改成接口调用逻辑：

const btn = document.querySelector("#btn")
const input = document.querySelector("#in")

btn.addEventListener("click", async () => {
  const dirName = input.value.trim();
  if (!dirName) {
    alert('请输入文件夹名称');
    return;
  }
  const resp = await fetch('/create-dir', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ dirName })
  })
  alert(await resp.text());
})

最后在项目根目录执行命令node server.js，打开浏览器访问http://localhost:3000即可正常通过按钮创建文件夹。

如果你完全不想启动后端服务，只是需要让用户在网页上操作后，在用户自己的本地设备上创建文件夹，可以使用浏览器原生的FileSystem Access API。这个API需要用户主动授权选择本地保存目录，只能操作用户明确授权的路径，无法直接修改你项目目录下的内容，且仅支持Chrome、Edge等Chromium内核的高版本浏览器，兼容性有限。

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