已构建Angular应用部署后显示空白页的解决方法

我有一个从IBM Notes数据库转换而来的Angular应用，直接在浏览器打开index.html能正常访问Notes文件且运行没问题，但部署到服务器并暴露index.html后，页面显示空白。查看index文件能看到HTML内容，怀疑是服务器环境下index没正确调用JS文件，请问怎么配置才能让应用在服务器上和本地打开表现一致？

浏览器控制台404错误截图

对应的index.html代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Teamstudio Export</title>
  <!--<base href="/">-->

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>

<body>
  <app-root></app-root>
  <script src="runtime.js" defer></script>
  <script src="polyfills-es5.js" nomodule defer></script>
  <script src="polyfills.js" defer></script>
  <script src="main.js" defer></script>
 </body>
</html>

排查与解决步骤 #

1. 修复<base>标签配置 #

Angular依赖<base>标签确定资源加载的基准路径，你当前注释掉了这个标签，这是核心问题：

• 若部署在服务器根目录（如http://你的服务器地址/），取消注释并保留<base href="/">
• 若部署在子目录（如http://你的服务器地址/notes-app/），修改为<base href="/notes-app/">
• 想同时兼容本地直接打开和服务器部署，用相对路径：<base href="./">

2. 检查资源路径与服务器权限 #

打开浏览器开发者工具（F12）切换到网络标签，刷新页面：

• 若JS/CSS文件返回404：确认服务器上的文件结构和本地完全一致，所有资源文件要和index.html在对应层级
• 若返回403：检查服务器对这些静态文件的访问权限，确保允许读取

3. 确认Angular构建产物（若自行构建） #

如果是你用Angular CLI构建的应用，必须用生产模式构建后再部署：

ng build --prod

把构建后dist目录里的文件上传服务器，不要直接用开发环境的文件。

4. 配置服务器支持SPA路由（若应用含路由） #

Angular是单页应用，若有路由配置，服务器需把所有请求重定向到index.html，否则刷新或直接访问路由会404：

• Nginx配置示例：

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

• Apache配置示例（创建.htaccess文件）：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

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