Vite项目默认端口5173改3000的配置方法及原因咨询

一、配置方法 #

有三种常用方式可以将Vite开发服务器的端口改为3000：

1. 命令行临时指定 #

执行dev命令时直接追加端口参数，无需修改配置文件：

npm run dev -- --port 3000

如果使用pnpm或yarn，写法略有不同：

pnpm dev --port 3000
# 或者
yarn dev --port 3000

2. 配置文件永久设置 #

在项目根目录的vite.config.js（或.ts）中，修改server.port字段：

import { defineConfig } from 'vite'
// 根据你的框架引入对应插件，比如Vue、React等
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000 // 固定指定端口为3000
  }
})

如果需要强制占用3000端口（端口被占用时直接报错，而非自动切换到下一个可用端口），可以添加strictPort字段：

server: {
  port: 3000,
  strictPort: true
}

3. 通过环境变量配置 #

在项目根目录创建.env.development文件，添加端口配置：

VITE_PORT=3000

然后在vite.config.js中读取该环境变量：

export default defineConfig({
  server: {
    port: process.env.VITE_PORT || 5173 // 优先使用环境变量，默认回退到5173
  }
})

二、默认端口为5173的原因 #

Vite团队选择5173作为默认开发端口，主要有两个原因：

• 谐音关联：5173对应"VITE"的数字键盘映射（V=5、I=1、T=7、E=3），是一个易记的标志性端口；
• 低冲突概率：5173属于1024以上的非系统端口，通常不会被系统服务或常见应用占用，能有效减少端口冲突的情况。

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