Angular 6生产服务器带参URL的base href及.htaccess配置问题

我来帮你拆解并解决这个问题，从base href配置、路由调整到.htaccess规则修改，一步步来：

1. 修正base href的正确配置 #

首先要纠正你当前base href的错误写法：你不需要在base href里写完整域名，正确的格式应该是基于域名的绝对路径。因为你的Angular项目部署在xyz.com/annexture/annextureform/这个子目录下，所以index.html里的base href应该改成：

<base href="/annexture/annextureform/">

更规范的做法是在构建生产包时通过Angular CLI指定base href，这样CLI会自动帮你注入到index.html中，避免手动修改出错：

ng build --prod --base-href="/annexture/annextureform/"

这一步是基础，确保Angular能正确解析所有静态资源和路由路径。

2. 调整路由配置以适配外部URL需求 #

你期望用户访问xyz.com/anexure/5时直接加载Angular应用，但当前的路由配置会把根路径重定向到/annexture/:id，这会导致实际路径变成xyz.com/annexture/annextureform/annexture/5，和你的需求不符。

这里我们需要简化路由，让服务器端的重写规则来处理外部URL到部署目录的映射，路由只负责捕获参数：

const routes: Routes = [
  // 直接用根路径对应组件，参数通过路由快照获取
  { path: '', component: AnnextureformComponent },
  // 或者保留带参数的路径，配合服务器重写后的路径
  { path: ':id', component: AnnextureformComponent }
];

在AnnextureformComponent中，你可以通过ActivatedRoute来获取id参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 获取URL中的id参数（快照方式，适合参数不会变化的场景）
  const id = this.route.snapshot.paramMap.get('id');
  // 或者用订阅的方式（适合参数可能动态变化的场景）
  this.route.paramMap.subscribe(params => {
    const id = params.get('id');
    // 处理你的业务逻辑
  });
}

3. 修改.htaccess实现URL重写（Apache服务器） #

因为你的生产服务器使用Apache（通过.htaccess判断），我们需要配置重写规则，把外部请求的/anexure/5映射到部署目录下的Angular应用，同时保留参数，并且处理Angular单页应用的路由刷新问题。

在你的annextureform目录下创建或修改.htaccess文件，添加以下规则：

方案一：直接传递id参数到Angular应用 #

RewriteEngine On

# 把外部请求 /anexure/5 转发到部署目录的index.html，同时传递id参数
RewriteCond %{REQUEST_URI} ^/anexure/([0-9]+)$
RewriteRule ^(.*)$ /annexture/annextureform/index.html?id=%1 [L,QSA]

# 处理Angular单页应用的路由刷新问题：如果请求的不是文件或目录，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /annexture/annextureform/index.html [L]

这种方案下，你可以通过ActivatedRoute的queryParamMap来获取id参数。

方案二：重写URL到Angular路由路径 #

如果你希望Angular路由直接通过:id捕获参数，可以用这个规则：

RewriteEngine On

# 把外部请求 /anexure/5 重写到部署目录的 /5 路径
RewriteCond %{REQUEST_URI} ^/anexure/([0-9]+)$
RewriteRule ^(.*)$ /annexture/annextureform/%1 [L]

# 处理Angular路由刷新问题
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /annexture/annextureform/index.html [L]

这样外部的xyz.com/anexure/5会被重写成xyz.com/annexture/annextureform/5，你的路由path: ':id'就能直接捕获到id参数。

关键注意事项 #

• 确保你的Apache服务器已经开启了mod_rewrite模块，否则.htaccess的重写规则不会生效。可以通过查看phpinfo()或者Apache配置文件确认。
• 构建生产包时必须使用--prod参数，确保代码被正确压缩、优化，并且base href被正确注入。
• 测试时可以在本地搭建一个Apache服务器，模拟生产环境的目录结构，先验证规则是否生效，再部署到生产服务器。

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