vite 创建vue3项目 配置端口

创建 Vue 3 项目并配置 Vite (基于 Vue 3 的高性能前端构建工具) 的时候，通常涉及以下几个步骤：

1. 安装Vite和Vue CLI：首先确保已经全局安装了`npm`或`yarn`，然后运行以下命令安装`vite`和`@vue/cli`插件（如果还未安装）：

   npm install -g create-vite vue-cli

2. 使用Vue CLI创建项目：创建一个新的Vite项目，你可以选择不使用默认模板（如`@vue/cli-service-preset-vite`），因为Vite直接支持Vue 3项目。执行命令：

   vue create my-project --template=vite

这将生成一个名为`my-project`的新目录。

3. 进入项目目录：切换到刚创建的项目文件夹：

   cd my-project

4. 启动项目：启动Vite服务器，它会自动监听指定的端口（通常是`3000`）。不需要写额外的配置文件，只需运行：

   npm run serve

或者如果你使用`yarn`，则用`yarn start`。

如果你想自定义端口号，可以在`vite.config.js`中手动设置，但这是可选的，因为Vite默认配置通常会处理这个。例如，添加以下内容到`vite.config.js`：

export default defineConfig({
  server: {
    port: 8080, // 更改为你想要的端口
  },
});

保存后重启服务，Vite 将会监听你指定的端口 `8080`。