Vite构建项目记录

背景

微信推送了一些公众号文章,所 vite 已经跟新到 v6 版本了,于是构建一个 vite 项目看下啥变化

过程

直接打开 https://vite.dev/ 官网,切换问中文语言,找到此处 https://cn.vite.dev/guide/#scaffolding-your-first-vite-project 文档告诉我们,直接执行

bash 复制代码
npm create vite@latest
// 之前记得文档让执行
npm create vite
// 不过个人理解, vite 肯定是想推广他的新版本,那就索性带上 latest 吧

随后按照提示,一步步来,如下

上面基本就是构建完了,在 vscode 中打开效果如下:

这个目录解构感觉给 v5 版本差不多。


随后又初始化一个项目,这次是自定一些选项,过程如下:

这次构建时,选择提示用户的交互模式构建的。选择了 vue-router、pinia、prettier 等。目录解构如下:

这个目录解构确实是给上面的对比是有一些区别的。其中默认安装了一个插件,vueDevTools ,在 vite.config.ts 中有体现,页面表现效果如下:

不过我们不喜欢可以删除之!如下:

相关推荐
学前端的小朱1 个月前
修改输出资源的名称和路径、自动清空上次打包资源
前端·webpack·打包工具
学前端的小朱1 个月前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
Java.慈祥6 个月前
WebPack5.0 快速入门
webpack·前端框架·npm·node.js·打包工具·源代码管理·前端工程化
HaanLen7 个月前
axios源码打包关于rollup.config.js文件分析
javascript·ecmascript·axios·rollup·打包工具
子龙烜7 个月前
npm常用命令大全(非常详细)
前端框架·npm·打包工具·npm命令
原来是有理数1 年前
前端工程化之 webpack <一>
前端·webpack·node.js·打包工具·前端工程化
bfbshs_ddd1 年前
webpack学习笔记
前端·笔记·学习·webpack·打包工具
若年封尘1 年前
详细总结Webpack5的配置和使用
前端·vite·webpack5·打包工具