Vite是伴随着Vue3正式版一起发布的，最开始Vite 1.0的版本是为Vue3服务的，并不是跨框架的。之后半年时间左右，出现了Vite 2.0版本，Vite 2.0真正脱离了和Vue3的强关联，以插件的方式，可以集成到目前流行的主流前端框架（Vue3、React）里。
Vite构建Vue3项目
使用 NPM:
npm create vite@latest
使用 Yarn:
yarn create vite
输入以上命令后按提示完成操作
xiaosanyedeMacBook-Pro:vite-learn wudengyao$ npm create vite@latest
Need to install the following packages:
create-vite@4.2.0
Ok to proceed? (y) y
✔ Project name: … vite-vue3
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla （如果你要使用Vue2可以用这个方式，然后再自己配置一下vite-plugin-vue2插件）
❯ Vue （默认是Vue3项目）
React （React项目）
Preact （比React项目轻量级的Preact项目）
Lit
Svelte
Others
因为我们要构建Vue3的项目，所以这里我们选择Vue就行了，然后下一步
✔ Project name: … vite-vue3
✔ Select a framework: › Vue
? Select a variant: › - Use arrow-keys. Return to submit.
❯ JavaScript
TypeScript
Customize with create-vue ↗
Nuxt ↗
选择开发言语，我们这里选JavaScript，后面讲到TypeScript再说。
✔ Project name: … vite-vue3
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /Users/wudengyao/vite-learn/vite-vue3...
Done. Now run:
cd vite-vue3
npm install
npm run dev
直接下一步，就生成了一个Vite构建的Vue3项目了。
code vite-vue3
然后我们通过命令code vite-vue3直接打开刚刚创建的项目
image.png
看下Vite项目的目录结构，有前端开发经验的小伙伴都知道，webpack项目的编译入口文件是main.js，配置文件是vue.config.js；而我们用Vite构建的项目的编译入口文件是index.html，配置文件是vite.config.js。其他的目录结构基本和webpack构建的项目是一致的。下面我们分别讲下index.html和vite.config.js
1、index.html入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
主要看这段代码
<script type="module" src="/src/main.js"></script>
Vite一开始会去加载index.html文件，然后通过script标签加载main.js，这其实和Vite的编译特性有关，传统的例如webpack的构建打包方式，启动必须优先抓取并构建你的整个应用，然后才能提供服务。这样的打包方式有一个明显的缺点，就是重建整个包的效率很低。而且更新速度会随着应用体积增长而直线下降。但在 Vite 中，当编辑一个文件时，Vite支持动态模块热替换（HMR），允许一个模块 “热替换” 它自己，而不会影响页面其余部分，使得无论应用大小如何，HMR 始终能保持快速更新。
Vite加载构建方式
webpac加载构建方式
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable进行强缓存，因此一旦被缓存它们将不需要再次请求。一旦你体验到 Vite 的神速，你是否愿意再忍受像曾经那样使用打包器开发就要打上一个大大的问号了。
- 了解更多可参考Vite官网：https://cn.vitejs.dev/guide/why.html
2、vite.config.js配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
因为我们这是一个新创建的项目，其实咋一看也看不出来什么，我们看到vue，Vite是使用插件的方式导入的。那我再举个例子吧，例如在webpack的项目中，我们要使用svg相关的图标，我们是通过引入loader的方式来使用的，然后在vue.config.js配置文件里设置svg-sprite-loader。
然而在vite里是通过集成插件的方式来使用svg图标的，我们得先安装vite-plugin-svg-icons的依赖，然后在plugins数组里，设置要缓存的svg图标的目录。其他一些本地server服务代理等，和webpack项目的配置方式都差不多，大家在后续的项目开发中遇到的话，自然都会明白的，这些也没什么难度。
- Vite使用一些三方依赖基本都是以plugins插件的方式引入的。
3、安装依赖，运行项目
安装依赖我们还是推荐yarn的方式，因为用npm的方式有时候会出现莫名其妙的错误
xiaosanyedeMacBook-Pro:vite-vue3 wudengyao$ yarn
yarn install v1.22.17
warning ../../package.json: No license field
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning vue > @vue/compiler-sfc > magic-string > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.17".
info To upgrade, run the following command:
$ brew upgrade yarn
✨ Done in 38.57s.
最后我们在通过npm run dev启动项目
xiaosanyedeMacBook-Pro:vite-vue3 wudengyao$ npm run dev
VITE v4.2.1 ready in 368 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
➜ press h to show help
image.png
总结：
那么，到这里用Vite构建Vue3项目就讲完了，现在有个问题不知道大家有没有想过，因为在用官方的npm create vite@latest命令行是没办法选择Vue2的方式构建项目的，只要一个Vanilla的方式，用Vite怎么构建Vue2的项目呢？其实我们就可以通过这个方式去构建Vue2项目，然后再安装官方提供的vite-plugin-vue2插件，完成配置就行。
image.png
网友评论