Angular生产部署修改base href后出现资源加载及MIME错误求助

核心问题根源 #

直接手动修改index.html中的<base href>标签是错误操作。Angular的资源路径由构建工具统一管理，手动修改后，开发/生产服务器无法正确映射资源路径，导致请求的runtime.js、styles.css等资源返回404，服务器转而返回默认的index.html（MIME类型为text/html），进而触发浏览器的MIME类型检查错误。

正确的base href设置方式 #

1. 恢复index.html的base标签 #

将src/index.html中的<base>标签改回默认值：

<base href="/">

2. 生产构建时指定base href #

使用Angular CLI的--base-href参数构建生产包，无需手动修改源码：

ng build --prod --base-href "/boleto_coop_front/"

构建完成后，dist/boleto-coop-front目录下的index.html会自动生成正确的<base href="/boleto_coop_front/">。

3. 开发环境测试路径配置 #

如果需要在本地开发环境测试该路径，启动开发服务器时需同时指定--base-href和--serve-path：

ng serve --base-href "/boleto_coop_front/" --serve-path "/boleto_coop_front/"

此时访问http://localhost:4200/boleto_coop_front/即可正常加载应用。

可选：Bootstrap本地资源配置 #

你已通过npm安装了Bootstrap，但当前使用的是CDN链接。若要切换为本地资源，需修改angular.json的styles和scripts数组：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

修改后重新构建或启动服务器即可生效。

生产服务器部署注意事项 #

将构建后的dist/boleto-coop-front目录下的所有文件上传至服务器的/boleto_coop_front/路径下，同时确保服务器配置支持SPA路由：

• 以Nginx为例，需在配置中添加：

  location /boleto_coop_front/ {
    try_files $uri $uri/ /boleto_coop_front/index.html;
  }
  

  避免刷新页面时出现404错误。

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