Angular 5执行ng build --prod后无CSS显示且无法跳转页面问题

结合你遇到的问题和提供的index.html片段（里面的<base href="/">是关键线索），我给你拆解两个问题的排查和修复方案：

一、搞定CSS样式丢失的问题 #

可能原因&修复步骤： #

• 检查angular.json的构建配置
  确保全局样式文件被正确加入构建配置的styles数组里，比如你用了全局styles.css或者第三方UI库的样式：

  "architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css" // 比如Bootstrap样式
        ],
        // ...其他配置项
      }
    }
  }
  

  要是漏加了这里，生产构建时就不会打包对应的样式文件。

• 清理缓存后重新构建
  有时候旧缓存会导致资源加载异常，执行下面的命令彻底清理后再构建：

  ng clean
  ng build --prod
  

• 检查组件内样式路径
  组件里的样式如果用相对路径，要确保格式正确，比如./my-component.css而非直接写my-component.css（Angular开发环境可能兼容，但生产构建会更严格）。

二、解决非首页无法访问的问题 #

这个是SPA（单页应用）的典型问题，核心是前端路由需要服务器配合重写规则，再结合base href的配置调整：

1. 修正base href配置 #

如果你的项目部署在服务器的子目录下（比如http://your-domain.com/shop/），而不是根目录，那原来的<base href="/">就不匹配了：

• 构建时直接指定base href（推荐这种方式，避免硬编码）：

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

  这样生成的index.html里的base标签会自动改成对应路径。

2. 配置服务器路由重写 #

Angular的路由是前端处理的，服务器需要把所有非静态资源的请求（比如刷新/product页面）重定向到index.html，否则会返回404。给你几个常见服务器的配置示例：

• Nginx：在server块里添加：

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

• Apache：在dist目录下创建.htaccess文件，内容如下：

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

• IIS：创建web.config文件放在dist目录：

  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

最后验证 #

完成上述配置后，重新构建并部署dist目录的文件，应该就能正常加载样式、访问所有路由了。

内容的提问来源于stack exchange，提问作者Niladri Banerjee - Uttarpara