如何使用Vite创建带基础路由、无测试文件的Angular应用（端口5000）

1. 初始化项目（一次性满足核心要求） #

直接执行以下命令，参数作用如下：

• --vite：指定使用Vite作为构建工具
• --skip-tests：跳过所有测试文件生成
• --routing：自动添加基础路由配置
• my-angular-vite-app 可替换为你想要的项目名称

ng new my-angular-vite-app --vite --skip-tests --routing

2. 配置5000端口启动 #

两种简单配置方式任选其一：

方式一：修改package.json启动命令 #

打开项目根目录的package.json，找到scripts下的start命令，添加端口参数：

"scripts": {
  "start": "ng serve --port 5000",
  "build": "ng build",
  "watch": "ng build --watch --configuration development"
}

方式二：修改angular.json全局配置 #

打开angular.json，定位到projects -> [你的项目名] -> architect -> serve -> options，新增port字段：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "port": 5000,
    "browserTarget": "my-angular-vite-app:build"
  }
}

3. 最小化配置优化 #

默认生成的配置已经足够精简，可做以下清理：

• 移除angular.json中残留的test相关配置项（因--skip-tests参数，大概率已自动省略）
• 若无特殊Vite自定义需求，保留默认的vite.config.ts即可（仅包含Angular集成的基础配置）

4. 验证路由功能 #

项目初始化时已自动生成app-routing.module.ts，可快速验证路由：

1. 生成测试组件（跳过测试文件）：

ng generate component about --skip-tests

2. 在app-routing.module.ts中添加路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 在app.component.html添加导航和路由出口：

<nav>
  <a routerLink="/about">About 页面</a>
</nav>
<router-outlet></router-outlet>

启动应用 #

执行命令启动项目，访问http://localhost:5000即可：

npm start

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