vite-plugin-mpb

用于vite的专用插件，依赖vite。

vite项目默认提供的多页面构建方案需要我们将页面放置到根目录中，而vite-plugin-mpb没有强制指定页面存放的位置。不过vite-plugin-mpb只会让vite构建指定目录下的入口html。

vite-plugin-mpb默认你的所有页面存在于src/pages下面，就是说如果项目根目录下有入口html文件，将不会处理。你可以通过scanDir来配置指定页面目录，由于原来根目录下的首页不被处理，你可以通过mainPage来制定src/pages下面的某个页面作为主页即可。

页面的概念：

每个页面至少包含一个html文件，正常情况下还有一个ts或者js文件，用于处理页面逻辑。

vite-plugin-mpb默认这两个文件的文件名为index。如果你的页面目录下不是index.html,index.ts或index.js。那么需要设置scanFile来告诉vite-plugin-mpb怎么找到你的入口文件。

比如你的某个页面的入口文件是：xx.html与xx.ts, scanFile可以配置为：'xx.{html,ts}'。

注意：不管你的html文件和ts文件名是啥，但这两个文件必须保持一样的名称，就是说：xx.html与yy.ts是不允许的。

安装

npm i -D vite-plugin-mpb

使用

mpb函数调用不传参，默认会构建所有页面。

import mpb from 'vite-plugin-mpb';
import { defineConfig } from 'vite';

console.log(mpb.verInfo);
// https://vitejs.dev/config/
export default defineConfig(async ({ mode, command , isPreview}) => {
  return {
    plugins: [
      vue(),
      mpb()
    ]
  };
});

如上代码，

通过调用mpb.verInfo可以查看版本信息。mpb函数有一个可选参数opt：MpOptions

type MpOptions = {
    /** 页面所在目录：'src/pages' */
    scanDir?: string,
    /** 指定入口文件，包含两部分：index.html, index.ts/index.js */
    scanFile?: string,
    includes?: string[],
    ignores?: string[],
    /**
     * 指定包含主页的模块，如果没指定默认为main模块，
     * 如果没有main模块，或者指定了但没有找到，将不做处理
     * */
    mainPage?: string
};

scanDir：默认为src/pages，即为存放页面的总目录。

scanFile：指定入口的html文件与ts/js文件，默认为index.{html,ts,js}。其他文件名还测试，建议每个页面的入口文件为默认就行。

includes：指定需要构建的页面目录，如果不是第一层的页面，如页面在src/pages/page1/page2/index.html，那么可以指定includes为：['page1']， 或者['page1/page2']。

ignores：指定不需要构建的页面

mainPage：指定主页。默认为src/pages/main下面的页面。如果没有指定就没有主页，但不影响其他页面访问和构建。如果指定了，但src/pages下面找不到，效果同上。

使用场景

假设我们的页面目录src/pages的结构为：

├─main
│      App.vue
│      index.html
│      index.ts
│      style.scss
│
└─page1
    │  index.html
    │  index.ts
    │  index.vue
    │  page1.scss
    │
    └─page2
            index.html
            index.ts
            index.vue

// 只构建page1
mpb({ includes: ['page1'] }) // page2也会被构建
// 只构建page1，但不构建page2
mpb({ includes: ['page1'], ignores: ['page1/page2'] })
// 构建所有页面，并指定主页为page1/index.html
mpb({ mainPage: 'page1' })
// 全量构建的基础上，忽略一些页面
mpb({ ignores: ['main', 'page1'] })

实现及相关说明可以参看这里： https://jkzm.xyz/blog/articles/learning/Vite%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%89%93%E5%8C%85%E5%AE%9E%E7%8E%B0%E7%BB%88%E6%9E%81%E6%96%B9%E6%A1%88.html?t=5