开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

---

写在前面

学习一个新东西，我们需要查看他的官方文档，这是两个官方文档网址：Vite中文网、Vite官方中文文档

下面开始正式的搭建和构建过程。

搭建第一个Vite项目

官方介绍了npm、yarn等搭建项目的工具，我这里选择使用npm搭建，打开命令窗口，输入：npm create vite@latest

回车后会问你 Ok to proceed？（是否继续？）输入y回车继续

接下来问你要创建的项目的名称，输入自己的项目名称回车

接着选择一个前端框架，我们这里选择Vue，通过方向键向下选择，回车确认

接着选择语言，因为我后续想要学习TS，故选择TypeScript

回车后我们发现目录下已经有刚刚创建的项目了

使用自己常用的IDE打开项目，我用的是vscode，在终端打开项目，并且输入命令安装依赖：npm install，因为我使用npm install安装过程很慢，所以临时使用cnpm：npm --registry https://registry.npm.taobao.org install，贼快

安装完后输入npm run dev运行项目，打开 http://127.0.0.1:5173/ 已经可以看到页面

构建生产版本（打包）

在终端输入命令npm run build，发现打包后页面是空白的，并且控制台报错，好多文件都找不到，我们需要在vite.config.ts中添加代码base: './'，使用相对路径就不会找不到文件了。

再运行npm run build，打包后的页面就可以正常显示。

写在最后

以上就是vite搭建vue项目及构建生产版本（打包）的过程全记录