Vite + Vue 3 项目中修改默认端口

在 Vite + Vue 3 项目中修改默认端口通常很直接，只需要在项目的根目录下找到并编辑 vite.config.js（或 vite.config.ts，取决于你是否在使用 TypeScript）文件即可。Vite 允许你通过配置对象的 server 属性来自定义开发服务器的各种选项，包括端口号。

下面是一个如何修改 Vite 端口号的示例：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 修改这里的端口号
    port: 3001,
    // 其他的服务器配置...
  },
});

在上面的例子中，server.port 被设置为 3001，这意味着你的 Vite 开发服务器将尝试在端口 3001 上启动。如果该端口已被占用，Vite 会尝试使用下一个可用的端口。

确保你已经安装了所有必要的依赖，包括 Vite 和 Vue 插件（如上例中的 @vitejs/plugin-vue）。

此外，如果你在 IDE（如 VSCode）中运行 Vite 服务器，并且之前已经运行过一次并占用了某个端口，那么再次尝试以相同的端口启动时可能会遇到端口冲突的问题。此时，你可以尝试：

1. 在 IDE 的终端中停止当前的 Vite 进程。
2. 使用新的端口号修改 vite.config.js 文件。
3. 重新启动 Vite 服务器。

如果 Vite 服务器启动成功，并且你想要确认它是否正在新的端口上运行，你可以尝试在浏览器中访问 http://localhost:3001（或者你所设置的任何端口）。如果一切设置正确，你应该能看到你的 Vue 3 应用正在运行。