Angular 项目配合 webpack 时要如何配置URL重写规则？

ng eject 命令从Angular CLI v6.0版本开始已被正式移除，因此执行时会报无效命令错误，无需再尝试该方案。

针对webpack场景下的Angular路由URL重写需求，可根据你的项目搭建方式选择对应配置：

场景1：使用Angular CLI默认构建链的本地开发环境 #

不需要手动导出或修改webpack配置，直接修改项目根目录下的angular.json配置即可：

• 找到 projects > [你的项目名称] > architect > serve > options 配置节点
• 新增配置项 "historyApiFallback": true
• 重启 ng serve 服务即可生效，此时直接访问任意路由路径都不会返回404

场景2：使用@angular-builders/custom-webpack扩展webpack配置的项目 #

如果你的项目已经接入了自定义webpack构建流程，直接在自定义的webpack配置文件中添加DevServer配置即可：

module.exports = {
  // 其他现有配置内容
  devServer: {
    historyApiFallback: true,
    // 其他已有devServer配置项
  }
}

场景3：纯webpack搭建的Angular项目（未使用Angular CLI） #

直接在项目的webpack.config.js中添加上述devServer配置即可，配置逻辑和场景2完全一致。

上述配置的核心是启用webpack DevServer的historyApiFallback能力，本质是将所有未匹配到静态资源的请求统一返回index.html入口文件，交由Angular前端路由完成后续解析，完美适配SPA应用的路由逻辑。

注意：上述配置仅适用于本地开发阶段的webpack DevServer，生产环境部署时需要在对应的Web服务器（Nginx、Apache、Caddy等）上配置URL重写规则，将所有路由请求 fallback 到index.html文件。

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