如何配置Netlify指向其他文件夹的HTML？解决项目404问题

index.html的位置确实可能导致你遇到的404错误，具体要结合webpack配置和运行/部署场景判断，以下是对应场景的修复方法：

开发环境（webpack-dev-server） #

• 问题原因：webpack-dev-server默认从项目根目录或配置的指定目录查找index.html，若你的index.html在src/下但未配置对应路径，服务端找不到入口文件就会返回404。
• 修复方式：
  • 修改webpack.config.js，在devServer配置中指定静态文件目录：

    module.exports = {
      // 其他配置项
      devServer: {
        static: './src' // webpack 5版本
        // contentBase: './src' // webpack 4及更早版本
      }
    };
    

  • 或者直接将src/index.html移动到项目根目录，dev-server默认会识别根目录下的index.html作为入口页面。

生产构建后部署 #

• 问题原因：webpack默认将打包产物输出到dist/目录，但不会自动将src/下的index.html复制到该目录，部署时服务器找不到首页文件导致404。
• 修复方式：
  • 使用html-webpack-plugin插件自动处理index.html：
    1. 安装插件：

       npm install html-webpack-plugin --save-dev
       

    2. 在webpack.config.js中添加配置：

       const HtmlWebpackPlugin = require('html-webpack-plugin');
       
       module.exports = {
         // 其他配置项
         plugins: [
           new HtmlWebpackPlugin({
             template: './src/index.html',
             filename: 'index.html'
           })
         ]
       };
       

    3. 重新执行构建命令，index.html会被自动复制到dist/目录，部署时将dist/下的所有文件放到服务器根目录即可。

服务器配置问题 #

• 问题原因：若构建产物已正确生成，但仍出现404，可能是服务器未将index.html设为默认首页，或部署路径与webpack配置的publicPath不匹配。
• 修复方式：
  • 检查服务器配置，确保默认首页列表包含index.html；
  • 若部署到服务器子路径，需在webpack.config.js中设置publicPath为对应子路径，同时调整服务器路由指向dist/目录。

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