在当前项目中安装Vite

泠曦れいひ2026-08-28 13:28

在当前项目文件夹中，执行以下命令可以将Vite安装到当前项目中：

powershell 复制代码

npm install -D vite

安装完成后，项目中会出现一个node_modules文件夹，他会包含vite包及其依赖包，以及后续可能安装的包，通常不需要对其进行太多的管理。除此之外还会出现一个package-lock.json项目包配置文件，并且原本的package.json会增加以下一段：

json 复制代码

"devDependencies": {
    "vite": "^8.2.1"
},

而package-lock.json文件夹中会出现vite包的详细配置文件。

安装好Vite后，可以使用以下命令运行Vite，实现编码时页面热更新：

powershell 复制代码

./node_modules/.bin/vite
./node_modules/.bin/vite dev
./node_modules/.bin/vite build

我们也可以在package.json中添加以下内容，实现通过npm指令快速运行以上指令：

json 复制代码

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
}

此时就可以在命令行中执行以下指令代替上面的一长串指令：

powershell 复制代码

npm run dev			# 开发模式
npm run build		# 构建打包
npm run preview		# 以构建包预览

此时项目中增加了许多可以通过指令重新安装的内容，以及打包出来的文件是可以通过build指令重新生成，这些内容是可以不用上传到远程库中的，所以可以在.gitignore中加入以下两个文件夹：

复制代码

dist
node_modules

在下一次拉取到这个项目时，使用npm下载包文件即可将所需依赖包全部下载下来：

powershell 复制代码

npm install