vite-plugin-html-fallback

简介

Vite 多页面应用下，同时开启多个单页时，配置路由规则来匹配相应的静态页面，来替换默认的 index.html

更新信息

1.0.0 配置特定规则路由来匹配不同的静态页面 1.0.3 兼容堆栈过深报错 1.0.5 修改引入规范

功能

当dev开发时，拦截html请求，然后根据配置的路由规则跳转相对应的html文件内容返回给浏览器

解决开发环境中，需要跳转多个单页应用的场景

使用方法

yarn add vite-plugin-html-fallback --dev # npm install vite-plugin-html-fallback -D`

在vite.config.js配置文件中添加以下内容

/**
 * 自定义插件，用于开发环境多页跳转时，路由匹配正确的静态首页
 * @param conmmonPath 路由公共路径 '/marketing/shangou/activity/'
 * @param entries 开发环境运行的多页列表 ['page1','page2', ...]
 * @returns 
 */

const { default: vitePluginHtmlFallback } = require('vite-plugin-html-fallback');

const commonPath = '/marketing/shangou/activity/';

const entryList = ['page1', 'page2', ...];

{
    plugins: [
        vitePluginHtmlFallback(commonPath,entryList),
    ]
}

配置完成后（目前支持二级路由），vite dev 后，当页面访问：

• /marketing/shangou/activity/page1/index ，跳转到page1.html
• /marketing/shangou/activity/page2/about ，跳转到page2.html