Angular CLI页面刷新后资源加载路径错误问题求助

首先肯定地说：完全可以在.angular-cli.json中定义基础路径，这也是解决路由刷新后资源加载错位问题的核心配置之一，但你遇到的字体文件仍加载错误的情况，说明还需要配合其他配置调整。下面一步步给你梳理正确的解决方式：

1. 正确配置baseHref #

你已经在.angular-cli.json的apps数组中添加了"baseHref": "/"，这一步是对的——它会告诉Angular所有资源的根路径，确保JS文件能从正确位置加载。不过要注意：

• 如果你是生产环境打包，记得在构建命令中同步指定baseHref，避免配置和实际打包不一致：

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

  这会自动在打包后的index.html中插入<base href="/">标签，让浏览器以这个路径为基准加载所有资源。

2. 确保字体文件被正确纳入打包资源 #

Angular CLI只会把assets配置中指定的目录下的文件复制到打包后的dist文件夹里。如果你的字体文件没被正确配置，打包后就找不到它们了：

• 先把字体文件放在src/assets/fonts（或你自定义的子目录）下；
• 然后在.angular-cli.json的apps[0].assets数组中添加这个目录：

  "apps": [
    {
      "baseHref": "/",
      "assets": [
        "assets",
        "favicon.ico",
        "assets/fonts" // 新增这一行，确保字体目录被打包
      ],
      // 其他配置...
    }
  ]
  

3. 修正CSS中字体的引用路径 #

这是很多人忽略的点：如果CSS中引用字体用了相对路径，当你在深层路由（比如/user/profile）刷新时，浏览器会以当前路由为基准去找字体，导致路径错误（比如变成/user/assets/fonts/xxx.ttf）。

解决方法是用基于baseHref的绝对路径，在URL开头加上斜杠：

@font-face {
  font-family: 'YourFontName';
  src: url('/assets/fonts/your-font.ttf') format('truetype'),
       url('/assets/fonts/your-font.woff') format('woff');
  /* 开头的/会让浏览器从baseHref定义的根路径开始查找 */
}

最后验证 #

做完以上三步后，重新启动开发服务（ng serve）或者重新打包生产环境，再刷新路由试试：

• JS文件会继续正常加载；
• 字体文件也会从/assets/fonts/xxx的正确路径加载，不会再出现错位问题。

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