修改vue3项目端口
时间: 2025-03-18 22:03:36 浏览: 55
### 更改 Vue 3 项目默认端口的方法
在 Vue 3 项目中,可以通过多种方法来修改项目的默认运行端口。以下是具体实现方式:
#### 方法一:通过 `vite.config.js` 配置文件设置端口
对于基于 Vite 的 Vue 3 项目,在根目录下的 `vite.config.js` 文件中可以配置开发服务器的相关参数。例如,添加如下代码以指定端口号[^1]:
```javascript
import { defineConfig } from 'vite';
export default defineConfig(({ command }) => {
return {
server: {
host: '0.0.0.0', // 设置主机地址
port: 9091, // 指定启动端口
}
};
});
```
此方法适用于大多数使用 Vite 构建工具的 Vue 3 项目。
---
#### 方法二:通过 `package.json` 修改脚本命令
另一种常见的做法是在 `package.json` 文件中的 `scripts` 字段里调整启动命令。例如,将 `"dev"` 脚本改为以下形式[^3]:
```json
{
"scripts": {
"dev": "vite --host 0.0.0.0 --port 9091"
}
}
```
这种方式可以直接覆盖默认端口设置,并且无需额外创建配置文件。
---
#### 方法三:动态指定端口(临时)
如果不想永久更改端口配置,也可以在每次启动时手动追加端口号作为参数。执行以下命令即可[^3]:
```bash
npm run dev -- --port 9091
```
这种方法适合于测试不同端口场景或者避免与其他服务冲突的情况。
---
#### 注意事项
- 如果项目依赖的是旧版 Vue CLI 工具链而非 Vite,则需按照传统方式进行端口修改,比如编辑 `vue.config.js` 或者直接在 `package.json` 中增加类似的命令^。
- 对于某些特殊环境(如生产模式),可能还需要考虑 Nginx 反向代理或其他部署方案的影响[^4]^。
综上所述,推荐优先采用 **方法一** 和 **方法二** 来完成端口定制化需求。
---
阅读全文
相关推荐

















