使用VUE-CLI4的项目，在撰写业务后，开发，操作和包装的速度要慢得多。为了改善开发体验并更新团队的技术框架，您需要升级到更高级的脚手架。Cli5，第二个是升级到最新的Vite。
其中，第一个计划很简单。实验后，包装速度并不慢，这可能与项目中的依赖性和业务代码有关。
第二个解决方案升级VITE。经过可行性调查，升级到VITE的成功率非常高。最后，决定从VUE-CLI4升级到Vite。这是一个高风险和高回报，因为市场上有许多升级，但有很多升级和成功的升级。成功地掌握了成功升级的回归也很明显。开发环境运行近几秒钟，开发经验得到了显着改善。
||vue-cli4 |Vite ||--- |--- |--- ||开发启动时间|33306ms |1247ms ||生产包装时间|78s |81s ||包容量|42.6 MB |28.6MB |||||||在操作期间，将相同的代码更改为编译时间|1427ms |瞬时|
生产环境的包装时间可能与我们项目中使用过多的Vite插件有关，但是开发环境的改善非常重要。
Vite-Plugin-Vue2是插件处理VUE2版本代码。如果该项目是VUE3，则安装的依赖项是不同的，请参阅WebPack-to-vite
只请注意，复制后是复制和更改HTML，以免破坏原始的WebPack函数。
修改复制的HTML以增加相应的JS文件参考。请注意，类型属性必须不小！
多页包装（MPA），其他页面上的HTML是相同的，并且不同的HTML可以引入相应的JS。
空气配置如下：
环境变量主要面临两个问题：
该项目在commonjs规范依赖项中很有用。例如，WebPack是基于节点开发的，支持了要求语法。包装时
在项目开发环境中，某些node_modules中的软件包也将具有commonj的代码。我们可以通过Vite-Plugin-Commonjs实现代码转换的这一部分，以确保开发环境的正常操作。
Vite已建立了对主流CSS Pre -Precessors（SASS/LINS/Stylus）的支持。当项目使用前处理器时，您只需要安装相应的预处理依赖项：
稍后包装时，我发现此插头具有副作用，并且以后采用其他方法。
使用此插头 - 将导致无法生成的Sourcemap文件。打包时，您可以看到警告：鉴于插件作者很长时间没有更新，因此建议更改相对路径或直接更改。如果有更多位置，则可以将文件定义为全局样式。文件最新解决方案：通常，出现此错误，因为插件使用Vite的API转换代码，但返回值却丢失。解决方案：将插头-in代码复制到项目中。
定义手写笔的全局文件
应该注意的是，在官方文档中，CSS Propropopesssssoroptions写道，文件名被用作钥匙，并且文件的文件扩展名称是Stylus IS，但我将其用作钥匙。您可以注意这个地方。
在Vite源代码中，判断了样式和样式，可以从理论上使用，但是当前的测试结果是样式没有生效为关键，原因可以在源代码的其他位置找到。
我们项目中使用的组件库是VANT2，它取决于少，并且组件的主题是由配置文件自定义的。在配置中，我们需要修改：
VUE-CLI中的主题配置如下：
Vite中的主题配置部分如下：
根据需求，根据项目的需要导入Vant组件库，并且可以成功导入组件，但丢失了组件的样式。这是因为在WebPack中，插件可以帮助我们实现组件的样式。在Vite中，请在Vite-Import插件中使用Vite-Plugin风格来帮助我们实施此功能，不仅是Vant组件库，其他组件库（例如Element）（例如Element），ANTV还可以使用此插件来按需进口：
Vite配置的别名的方法与VUE-CLI不同，并且没有默认的别名。它们需要通过配置实现，并且Vite不能忽略文件的后缀。我们还需要修改配置以实现：
注意配置顺序，从左到右匹配。如果有一个具有相同名称但不同类型的文件的文件，则可能会在预期之外获得结果，例如同一目录的存在。根据上述订单，将优先考虑该文件。建议这种情况构成后缀进行引入。
Vite配置交叉域和WebPack也有不同的。您需要修改配置
以上是几种常见的跨域配置方法。WebPack中的更改更改为WebPack的代理，类型变成了返回函数请求路径的函数。
Vite配置为多页包装，请参阅
基础是指服务器下运行的项目，该项目通常通过环境变量的动态获得。
使用插头-in以Vite实现ESLINT检查功能。发现在安装过程中将报告错误。安装1.3.0版本。
插件胶囊文档
您可以在说明中声明模式环境。可以在vite.config.js中获得此模式。
保存操作说明的开发环境可以运行，但是VITE的特征是您使用的页面将被包装。其他页面无法访问，也不会包装。因此，您需要打包它。如果有任何疑问，如果有错误，则可以解决该错误。
如何关闭模块加载
该项目是一个通过其他方法实现SEO的水疗应用程序，因此需要删除模块装载以减轻SEO服务的负担。但是，Vite无法将其删除。有些人目前有需求和代码提交。我希望这方面可以有这方面的功能。
Vite Build生成了出现SourCemap错误的原因。这是：API转换代码在项目中的Vite插件中使用，但是无法生成返回源。解决方案如下：
将第三个 - 方Vite插头-in复制到项目，修改并使用本地修改后的插头。我们只需要插件函数功能的返回值，然后添加它。
原始：https：//juejin.cn/post/7097129382245826597
最后，如果可能的话，您可以将PR提交给插件作者，以帮助他人解决问题
Transformource-Code-Transformations
遇到其他坑或新需求后，它们将在此处进行更新。
升级建议和手册
vue -cli迁移vite2练习摘要-SI或不社区
关于掘金的Vite文章
原始：https：//juejin.cn/post/7097129382245826597