芜念
前端
获得徽章 14
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
分享一个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或其他技术无关。
#码上掘金#
使用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或其他技术无关。
#码上掘金#
展开
评论
5
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章