刷新浏览器时如何避免404错误？Angular13路由配置求助

Angular CLI 默认不会暴露 webpack.config.js，因为它把 webpack 配置封装在了内部工具链里。你不需要手动找这个文件，用下面两种方法就能实现需求：

方法一：直接修改 angular.json（最简单） #

这是官方推荐的方式，不需要额外插件。找到项目根目录的 angular.json，修改对应的 serve 配置，添加 historyApiFallback: true：

"projects": {
  "你的项目名称": {
    "architect": {
      "serve": {
        "options": {
          "historyApiFallback": true,
          // 其他已有配置（比如 port、host）保持不变
        }
      }
    }
  }
}

这个配置会让开发服务器无论请求什么路径，都返回 index.html，完全满足前端路由接管的需求。同时确保你的路由模块是用 RouterModule.forRoot(routes)（默认就是这个，没开 hash 模式），这样前端路由就能正常解析路径。

方法二：自定义 webpack 配置（适合复杂场景） #

如果除了路由 fallback，你还需要修改其他 webpack 配置，可以用 @angular-builders/custom-webpack 插件：

1. 安装插件：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录新建 webpack.config.js，添加以下内容：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
};

3. 修改 angular.json，替换 build 和 serve 的 builder，并指定自定义配置文件路径：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          // 其他原有 build 配置保持不变
        }
      },
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
          // 其他原有 serve 配置保持不变
        }
      }
    }
  }
}

改完之后重启开发服务器，配置就会生效。

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