通过webpack打包vue是真的慢,要好久,但是vite的打包速度真的非常快,下面介绍vite简单的使用

由于Vite最新版已经更新到了3,所以对下面的内容进行了更新,更多详细可以浏览官网文档

一、构建vite项目

兼容性注意

Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

使用npm:

npm create vite@latest

使用yarn:

yarn create vite

使用 PNPM:

pnpm create vite

然后按照提示操作即可!

构建完成如图

image-20220119172622861

二、快速构建vue3

通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

或者cva projectname(cva就是create-vite-app的缩写)

按照上面cva这种成功构建后的项目中vite版本是老版本:"vite": "^1.0.0-rc.13",可以通过根目录下的package.json查看,这是我在解决vite+vue3跨域时发现的问题,因为安装vite插件显示报错,并且这样构建后根目录下没有vite.config.js文件,所以极不推荐这一种

新旧项目目录结构对比

旧版本vite

较新vite

所以推荐刚开始提及的命令行安装vite最新版本

然后按照提示操作即可!

构建完成如图

image-20220119172708901

新版构建成功如图

运行

Vite2+Vue3

Vite3+Vue3

最后修改:2022 年 11 月 28 日
点个赞或者请作者喝杯咖啡