Netlify部署Three.js站点提示dist目录不存在但构建成功如何解决

该报错的核心原因是Netlify配置的发布目录和你webpack构建产物的实际输出路径不一致，按以下步骤处理即可：

1. 先本地确认构建产物路径 #

在本地项目根目录执行npm run build，执行完成后查看生成的构建产物存放在哪个文件夹下：

• 如果产物在dist目录：直接核对Netlify配置即可
• 如果产物在其他目录（从你dev命令的配置参数推断，大概率是build/dist）：可以直接把Netlify的发布目录改成对应路径，或者调整webpack配置统一输出到dist目录

2. 调整webpack输出配置（可选） #

如果要统一输出到dist目录，打开项目根目录的webpack.config.js，修改output字段的path配置：

const path = require('path');

module.exports = {
  // 其余原有配置保持不变
  output: {
    path: path.resolve(__dirname, 'dist'), // 配置输出目录为项目根目录下的dist
    filename: '[name].bundle.js'
    // 其余output原有配置保持不变
  }
}

如果不想修改webpack配置，也可以直接修改package.json里的build命令，强制指定输出路径：

"build": "webpack --mode production --progress --output-path ./dist"

3. 核对Netlify构建设置 #

进入对应项目的Netlify后台，找到Site settings > Build & deploy > Build settings，确认两个配置项：

• Build command：填写npm run build
• Publish directory：填写你实际的构建产物目录（比如dist或者build/dist）
  修改配置后重新触发部署即可解决问题。

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