如何初始化一个新的 Vite 项目并配置正确的 `vite.config.js`?
时间: 2024-10-08 16:14:00 浏览: 34
初始化一个新的 Vite 项目通常通过命令行工具完成,下面是基本步骤:
1. **安装Node.js和npm**:首先确保你的系统已经安装了Node.js,如果没有,请从官网下载并安装。
2. **全局安装Vite CLI**:打开终端(Windows/Linux/Mac)并运行:
```
npm install -g @vite/cli
```
3. **创建新项目**:
使用Vite CLI 创建一个新的项目,例如在桌面目录:
```
vite create my-vue-project
```
输入项目名称,可以选择默认选项或者自定义某些配置。
4. **进入项目目录**:
创建完成后,进入新项目的根目录:
```
cd my-vue-project
```
5. **配置 `vite.config.js`**:
打开 `vite.config.js` 文件(位于 `./config` 目录下),这是Vite的核心配置文件。初始模板会包含一些基础配置,如入口点、路由等。你可以根据需要添加或修改,比如更改构建目标、引入第三方插件等。以下是配置的基本结构:
```javascript
export default defineConfig({
build: {
outDir: 'dist', // 输出目录
assetsDir: 'static', // 静态资源目录
},
server: {
port: 3000, // 开发服务器端口
},
plugins: [], // 插件列表
});
```
6. **启动开发服务器**:
可以通过以下命令启动Vite的开发服务器:
```
vite
```
现在你应该能在浏览器中访问 `http://localhost:3000` 查看你的项目。
记得在编辑完配置后保存并重启开发服务器,以便应用新的配置。
如果你需要更复杂的配置,可以参考Vite官方文档(https://vitejs.dev/guide/config.html)。