AngularJS项目修改Base URL后URL异常及资源加载失败问题

1. 正确设置页面Base Href #

在项目的index.html根页面中，设置正确的<base>标签，注意必须以斜杠结尾，这是确保路由和资源路径解析正确的关键：

<base href="/carrom/">

2. 配置AngularJS路由的LocationProvider #

在应用主模块的config阶段，调整$locationProvider的配置，匹配base href并处理路由的#号问题：

angular.module('yourAppName')
  .config(['$locationProvider', function($locationProvider) {
    // 启用HTML5模式，移除URL中的#号，同时依赖base href配置
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true
    });
    // 清空hash前缀，避免出现多余的#!格式
    $locationProvider.hashPrefix('');
  }]);

配置后，应用地址会变为http://localhost:4200/carrom/，而非/carrom#/。

3. 修复静态资源加载路径 #

修改Base URL后，静态资源（图片、CSS、JS）的相对路径会出现解析错误，需调整为以下两种方式之一：

• 绝对路径方式：直接使用完整的相对根路径，比如：

  <!-- 错误写法 -->
  <img src="assets/logo.png">
  <!-- 正确写法 -->
  <img src="/carrom/assets/logo.png">
  

• AngularJS动态绑定方式：在应用的run阶段注入根作用域的base URL，模板中通过ng-src/ng-href绑定：

  angular.module('yourAppName')
    .run(['$rootScope', function($rootScope) {
      $rootScope.baseUrl = '/carrom/';
    }]);
  

  模板中使用：

  <img ng-src="{{baseUrl}}assets/logo.png">
  <link rel="stylesheet" ng-href="{{baseUrl}}styles/main.css">
  

4. 服务器端重定向配置（可选） #

如果启用了HTML5模式，刷新页面时会出现404错误，需要在服务器端配置重定向规则，将所有/carrom下的请求指向index.html。以Nginx为例：

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

其他服务器（如Apache、IIS）需配置对应重写规则，核心逻辑为将非静态资源的请求转发到应用入口文件。

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