首先在讲述vite优化之前，我们先来分析一下和传统的项目管理构建工具的区别，以webpack为例，它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译，从而变成我们html所需要的js格式渲染我们的页面。随着浏览器的发展，逐渐的已经支持了ES模块因此Vite在设计时考虑在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。优势：这样就避免了随着应用体积的增大，导致了启动服务缓慢，一处代码更新界面需要数秒钟才能显示的问题。运行速度真的没得说。同样的，作为一个新型的构建框架，也有很多的弊端。缺点：只能针对现代浏览
一、目标：使用vite搭建一个Vue3的项目，并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接：http://nodejs.cn/download/下载左边的长期支持版本就好，最新版本可能会友一些问题。VSCode的下载是比较麻烦的，这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了，有需
一、目标：使用vite搭建一个Vue3的项目，并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接：http://nodejs.cn/download/下载左边的长期支持版本就好，最新版本可能会友一些问题。VSCode的下载是比较麻烦的，这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了，有需
1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置，红色部分就是关于插件的基础自动导入部分，这样就可以将vue和router的相关api全局导入了，importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[ vue(), AutoImport({ imports:["vue","vue-router"], dts:"types/auto-imports.
1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置，红色部分就是关于插件的基础自动导入部分，这样就可以将vue和router的相关api全局导入了，importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[ vue(), AutoImport({ imports:["vue","vue-router"], dts:"types/auto-imports.
执行npminit@vitejs/app时报错：internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因，以为是node的版本过低，但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛，但是创建项目不成功，为了保险起见将node版本升级到了15.7.0。试了下，嗯，还是报错。又在网上找了半天，有人安装vite出问题，细瞅瞅，可能是npm的版本太低的原因。想想自己是不也是这个导致的，将npm版本原来的6.x.x更新到8.x.x。重新执行np
执行npminit@vitejs/app时报错：internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因，以为是node的版本过低，但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛，但是创建项目不成功，为了保险起见将node版本升级到了15.7.0。试了下，嗯，还是报错。又在网上找了半天，有人安装vite出问题，细瞅瞅，可能是npm的版本太低的原因。想想自己是不也是这个导致的，将npm版本原来的6.x.x更新到8.x.x。重新执行np
问题 今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示TypeError:vite.createFilterisnotafunction错误原因 vite版本与安装的依赖版本不匹配 近期vite3发布，但我们使用的还是v2，所以安装依赖的时候默认安装的是最新版本，这是就会出现版本和安装的依赖不匹配的问题 需要注意的还有一个点就是Vite不再支持Node12/13/15，因为vite已经进入了EOL阶段。现在必须使用Node14.18+/16+版本解决方法 ①升级到vite3npminstall-Dvite
问题 今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示TypeError:vite.createFilterisnotafunction错误原因 vite版本与安装的依赖版本不匹配 近期vite3发布，但我们使用的还是v2，所以安装依赖的时候默认安装的是最新版本，这是就会出现版本和安装的依赖不匹配的问题 需要注意的还有一个点就是Vite不再支持Node12/13/15，因为vite已经进入了EOL阶段。现在必须使用Node14.18+/16+版本解决方法 ①升级到vite3npminstall-Dvite
前言这篇文章主要是记录前段时间公司里以vite构建的一个小项目（前端界面不多，主要功能及相关配置是在后端），挺简单的几个小页面。说到vite，之前虽然都有学习了解及demo尝试，但因为业务等其他各方面因素也一直没有一个正式的，借这次机会特别记录下。Vite介绍不说废话，去官网看看配置环境变量根目录下创建env文件夹（也可以不创建env文件夹，直接在根目录下创建对应的环境变量文件）分别创建自己需要的环境文件及对应的配置//类似于这种方式进行配置NODE_ENV="develop"VITE_APP_BASEAPI="https://www.dev.com"vite.config.ts文件中进行配置
