vite 创建vue3项目 配置端口
时间: 2024-08-13 17:09:55 浏览: 60
创建 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`:
```javascript
export default defineConfig({
server: {
port: 8080, // 更改为你想要的端口
},
});
```
保存后重启服务,Vite 将会监听你指定的端口 `8080`。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)