获得徽章 0
分享一个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或其他技术无关。

#码上掘金#
展开
评论
写代码写着写着就钻到一些不重要的问题中,反而忘了正在处理的事情。怎么说呢,追求极致是好的,但还是要分清主次。 #码上掘金#
评论
#码上掘金# 关于TS的is语法和vue源码示例
情绪羊于2022-09-11 18:07发布的图片
1
在浏览器中,直接为一个元素设置height: 100%,并不能达到我们想要的效果——让该元素填满容器。
百分比height设定执行逻辑为,向上查找能够找到一个高度能够确定下来的父元素,找到头就是html元素。
高度能够确定下来的意思是:
1. 该元素明确指定了高度。如px、vh等单位
2. 该元素的高度可以由浏览器动态计算出来。如flex布局中,使用flex-grow属性;
找到这样的父元素之后,将会按比例折算,设置当前元素的高度值。
展开
1
为啥vue-pro这个主题在编写的时候,代码块主题是浅色系,发布之后就变成深色系了?这是bug吗[衰]
1
情绪羊的头像
关注了标签 NPM NPM
前端开发 @ 字节跳动
情绪羊的头像
关注了标签 Mac Mac
前端开发 @ 字节跳动
下一页
个人成就
文章被点赞 424
文章被阅读 57,930
掘力值 2,080
收藏集
9
关注标签
26
加入于