vite 更换端口号

可以通过在vite.config.js文件中配置server选项来更改vite的端口号。具体方法如下：

// vite.config.js
export default {
  server: {
    port: 9000 // 更改端口号为9000
  }
}

如果想要在命令行中更改端口号，可以在运行vite命令时添加--port选项，例如：

vite --port 9000

相关问题

vite 端口被占用后移

### 解决 Vite 端口被占用问题并移动到其他端口

当遇到 Vite 开发服务器启动失败提示端口已被占用的情况时，可以通过修改配置文件或命令行参数指定不同的端口号来解决问题。

#### 方法一：通过命令行参数更改端口
可以直接在启动 Vite 的时候通过 `--port` 参数指定新的端口号：

npm run dev -- --port 3001

这将会让 Vite 使用 3001 号端口而不是默认的 3000 来运行开发服务器[^3]。

#### 方法二：编辑 vite.config.js 文件永久改变端口
如果希望每次启动都自动使用特定端口，则可以在项目根目录下的 `vite.config.js` 文件中加入如下配置项：

export default defineConfig({
  server: {
    port: 3001,
    strictPort: true // 如果该端口不可用则抛出错误而非尝试下一个可用端口
  }
})

这样可以确保即使重启计算机之后也依然保持相同的自定义端口设置。

#### 方法三：查找并关闭占用端口的服务进程
有时可能是因为之前未完全停止的老实例还在占用着目标端口。此时可先找出哪个程序正在监听这个端口再将其终止掉（Windows 和 Linux 命令有所不同），然后再重新启动 Vite 即可正常工作[^4]。

对于 Windows 用户来说，可以使用 netstat 工具配合 tasklist 查看具体是什么应用程序占用了某个端口；而对于 macOS/Linux 则推荐 lsof 加上 kill 组合拳快速定位和释放资源。

---

vue3+vite 配置反向代理和跨域 设置端口号

Vue3 和 Vite 结合配置反向代理和跨域主要是为了在本地开发环境下访问非本机服务。以下是基本的设置步骤：

1. **Vite** 中设置：Vite 默认支持 `vite.config.js` 文件来进行配置。你需要添加一个 `server` 对象，其中包含 `proxy` 属性。例如：

export default defineConfig({
  server: {
    port: 3000, // 可选，设置服务器监听端口，默认为 3000
    proxy: {
      '/api': { // 目标 URL 前缀
        target: 'https://api.example.com', // 跨域目标地址
        changeOrigin: true, // 允许跨域请求
        secure: false, // 如果目标是 HTTPS，则这里设为 false
        rewrite: (url) => url.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

2. **Vue3** 部分：这主要是处理浏览器的同源策略，对于 Vue 的路由配置，你可以使用动态路由元信息来实现跨域，但这不是必需的。

3. **启用跨域**：如果你的API需要跨域，后端服务器可能需要允许来自特定域名或端口的请求。具体取决于你的服务器环境，如 Node.js 的 Express 或 Nginx，通常需要在服务器上做相应的 CORS（Cross-Origin Resource Sharing）配置。