Angular使用npm start启动时如何在localhost配置自定义上下文根路径

解决方案 #

你之前的配置仅作用于生产打包阶段，没有对ng serve启动的开发服务生效，按以下步骤修改即可：

步骤1：修改package.json的启动脚本 #

给start命令新增两个参数：

• --base-href /myApp/：自动注入正确的base标签，无需手动修改HTML文件
• --serve-path /myApp/：让开发服务将/myApp/作为根路径处理，避免访问时返回404
  修改后的scripts配置如下：

"scripts": {
  "ng": "ng",
  "start": "ng serve --port 4300 --host 0.0.0.0 --proxy-config proxy.conf.json --base-href /myApp/ --serve-path /myApp/",
  "build": "ng build --prod --base-href /myApp/",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

步骤2：验证效果 #

直接执行npm start启动服务，访问http://localhost:4300/myApp/#/index.html即可正常访问应用。

补充说明 #

如果需要生产打包也沿用同一个上下文路径，保持上述build命令的--base-href参数值为/myApp/即可，和开发环境保持一致，避免打包后部署出现路径错误。

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