通过webpack打包vue是真的慢,要好久,但是vite的打包速度真的非常快,下面介绍vite简单的使用
由于Vite最新版已经更新到了3,所以对下面的内容进行了更新,更多详细可以浏览官网文档
一、构建vite项目
使用npm:
npm create vite@latest
使用yarn:
yarn create vite
使用 PNPM:
pnpm create vite
然后按照提示操作即可!
构建完成如图
二、快速构建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最新版本
然后按照提示操作即可!
构建完成如图
新版构建成功如图
运行
版权属于:张子
本文链接:https://www.znzzi.com/articles/199
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。