Vite 的打包和预览功能

前面我们讲了在项目开发阶段使用 Vite 的方式。而在开发完成后，我们需要将项目代码打包到指定的输出文件夹（比如 dist）中，之后再到服务器中部署打包出来的这个文件夹。那么，如何使用 Vite 对项目做打包呢？很简单，我们执行下面的命令来打包项目：

npx vite build
复制代码

 

打包成功后，会在项目目录下生成一个 dist 文件夹，其目录结构如下：

Vite 会默认把我们的代码打包进 dist/assets 文件夹中，其中 vendor.xx.js 文件中会存放第三方的资源。

而在打包成功后，我们通常需要在浏览器中测试一下打包出来的东西有没有问题，那么一种方法是通过 Live Server 插件打开我们的 index.html 文件，但是，Vite 也提供给了我们另外一种方式，我们可以执行下面的命令开启一个本地服务器，预览打包后的项目：

npx vite preview
复制代码

 

这个预览的效果也就是我们打包出来的效果。

当然，在真实开发中，我们一般不会一直敲 npx vite 命令，而是会将该命令写进 package.json 文件的 scripts 中：

 

之后，如果是在开发阶段想要把项目跑起来，那就直接执行 npm run serve：

 

如果想打包准备部署了，那就执行 npm run build：

 

而如果是在打包之后，想要预览打包出来的代码的效果，那就执行 npm run preview：

以上，就是关于 Vite 的打包和预览功能的说明。

更多关于 Vite 的配置可以查阅官方文档：vitejs.dev/config/