code.juejin.cn
获得徽章 0
- #码上掘金# 公司里的 webpack 老项目切换到 vite 项目还真是不容易哇，各种妖魔鬼怪，lang="jsx"这种类型的标签需要加，vue文件的后缀名需要加，还有循环引用webpack这块不知道用了什么魔法，大部分循环引用都是不影响正常运行的，不过切到 vite 之后就是 import 一个 undefined 过来，然后页面就挂了（别问俺怎么知道的）。针对这个循环引用的问题，整了个一个工具用来扫描，还是比较准确的，有兴趣的话star下展开赞过
评论3 - 分享一个vite MPA插件: vite-plugin-virtual-mpa
使用vite开发构建多页面应用的时候，我们通常需要一个具备以下能力的插件：
1. 具备模板引擎如ejs，能够使用一个模板生成多份文件，且能自定义构建时生成文件的路径。
2. 自动配置多入口，并提供能力配置开发服务器的代理（主要是history fallback api）。
根据名称匹配度和下载量，我筛选到以下插件
1. vite-plugin-mpa：可以自动配置入口，并提供开发服务器代理配置入口（fallback rule），但必须按照约定调整目录结构，且不支持模板引擎和虚拟入口，也无法定义生成文件的路径。
2. vite-plugin-html-template：这个插件的作者和vite-plugin-mpa是同一个人，算是作者推荐的配套插件，主要是和mpa插件组合使用以提供模板引擎功能，同样不支持虚拟入口。
3. vite-plugin-html：只支持模板引擎，且不支持虚拟入口。
4. vite-plugin-virtual-html：支持虚拟入口，勉强算支持模板引擎，提供了渲染接口。
其中，“虚拟入口”的意思是，通过一个模板文件，渲染出多个入口html文件。
其他插件大同小异，他们各有所长，但用起来总不趁手。要么需要搭配使用，要么对现有项目结构的改动较多。有时候我也好奇，既然实现了模板引擎，却又需要多个模板文件，这样做岂不是失去了模板的优势。
这个插件（vite-plugin-virtual-mpa）便是为了解决这些问题，它同时具备上面提到的所有能力。通过结合虚拟入口和模板引擎，使得用户只需要一份模板就可以生成不同的入口html，且能自定义入口文件的输出路径（再也不用手动写脚本移动了！）。同时也提供了接口为开发服务器配置rewrite rules，以便开发时能够正确地请求到入口文件。
如果你的项目正在使用vite工作流且为MPA应用，不妨尝试一下这个插件，它不限制技术栈，与你是否使用vue还是react或其他技术无关。
#码上掘金#展开等人赞过评论4
![[衰]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
