Vite 的打包和预览功能

·  阅读 1842

「这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战」。

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

npx vite build
复制代码

image-20211220211804437

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

image-20211220211924366

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

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

npx vite preview
复制代码

image-20211220212703207

image-20211220212852547

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

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

image-20211220213422683

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

image-20211220213621187

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

image-20211220213825274

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

image-20211220214051980

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

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改