如何在Angular应用中设置base Href？部署后资源404问题排查

我来帮你排查一下这个Angular部署后资源加载失败的问题，大概率是路径配置或者文件上传环节出了问题，按下面的步骤逐一排查：

1. 修正--base-href的配置格式 #

你当前使用的--base-href="https:xxxx.in/samples/asiatride_design/"存在两个小问题：

• 完整的HTTPS链接写法容易出现协议（http/https）混淆或域名变更的适配问题，更稳妥的是用根相对路径
• --prod="true"可以简化为--prod，Angular会自动识别为布尔值true

修正后的build命令应该是：

ng build --prod --base-href="/samples/asiatride_design/"

2. 确认打包文件的上传方式 #

你的angular.json中outputPath配置为dist/Asia，意味着打包完成后，所有静态资源（styles.js、main.js、index.html等）都在dist/Asia目录下。

• 错误做法：把整个Asia文件夹上传到服务器的public_html/samples/asiatride_design/目录（这样资源路径会变成/samples/asiatride_design/Asia/styles.js，自然找不到）
• 正确做法：进入dist/Asia目录，把里面的所有文件和子文件夹直接上传到服务器的public_html/samples/asiatride_design/目录下

3. 验证打包后的index.html资源路径 #

打开dist/Asia/index.html，查看里面的资源引用路径，比如styles.js的标签应该是这样的：

<script src="/samples/asiatride_design/styles.js"></script>

如果路径不符，说明base-href设置有误，需要重新执行修正后的build命令。

4. 配置服务器的静态资源访问规则（针对Apache服务器） #

如果你的服务器是Apache，可能需要在public_html/samples/asiatride_design/目录下创建.htaccess文件，确保SPA路由和静态资源都能正常访问，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /samples/asiatride_design/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /samples/asiatride_design/index.html [L]
</IfModule>

按上面的步骤操作后，再访问你的页面应该就能正常加载资源了。

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