Angular 5项目无法通过dist文件夹在WAMP服务器部署求助

咱们一步步拆解你遇到的问题，从构建配置到服务器设置逐一排查：

1. 修正base-href的配置逻辑 #

你当前的构建命令ng build --prod --base-href "/dist/"和部署方式不匹配：

• 如果你是把dist文件夹里的所有文件直接复制到WAMP的DOCUMENT_ROOT（也就是www目录），那base-href应该设为根路径，正确命令是：

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

• 如果你是把整个dist文件夹放到www目录下（即www/dist/），那base-href设为"/dist/"是对的，但要确保dist文件夹内的所有文件（包括嵌套的assets、js/css包）都完整复制，没有遗漏。

2. 启用WAMP的URL重写模块（关键！） #

Angular单页应用依赖URL重写，否则刷新页面或直接访问子路由会出现404。操作步骤：

• 打开WAMP管理器，依次点击Apache > Apache Modules，勾选rewrite_module
• 重启WAMP服务器

然后在对应目录创建.htaccess文件：

• 如果文件直接放在www根目录，在www下建.htaccess，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
- 如果是放在`www/dist/`下，就在dist文件夹里建`.htaccess`，把`RewriteBase /`改成`RewriteBase /dist/`

## 3. 检查文件权限与完整性
- 右键WAMP的目标文件夹（www或www/dist），选择**属性 > 安全**，确认当前用户拥有读取、执行权限
- 打开dist文件夹，核对是否包含`index.html`、带哈希值的`main.*.js`、`styles.*.css`，以及assets资源文件夹；再打开`index.html`，检查js/css的引用路径是否和`base-href`匹配（比如base-href为"/"时，引用应为`<script src="main.xxx.js"></script>`）

## 4. 切换路由模式（备选方案）
如果不想配置URL重写，可以改用Angular的哈希路由模式：
修改`app.module.ts`：
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, ExtraOptions } from '@angular/router';

// 启用哈希路由
const routerOptions: ExtraOptions = {
  useHash: true,
};

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes, routerOptions)],
  // 其他配置
})
export class AppModule { }

重新构建部署后，访问路径会带#（比如localhost/dist/#/home），无需依赖URL重写即可正常运行。

5. 先验证项目本身的可用性 #

先在本地用ng serve --prod启动项目，确认项目能正常加载、路由跳转正常，排除代码本身的问题后，再聚焦WAMP的配置排查。

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