vite-plugin-html-template-mpa

中文 | English

重要更新

• 由于 vite-plugin-html 插件不再维护，在 vite 5.0 版本启动时会有警告，所以此插件在单页应用中兼容了此插件的功能。
• 版本 > 1.0.0 相关的 api 具有调整，使用时请注意，最新版本已支持 vite 5.0.0 版本。

多页应用 pagesDir 默认值已调整为 src/views，如果多页应用使用出现问题，请配合 vite-plugin-multi-pages 一起使用

功能

• HTML 压缩能力
• 单页/多页应用支持
• 支持自定义 entry、template
• 支持多页应用生成主页面包含所有页面的跳转路径
• 支持打包目录已经 html 名称改变，路径改变
• 支持 html 页面中资源增加 hash

如何使用

安装

1yarn add vite-plugin-html-template-mpa
2# or
3pnpm add vite-plugin-html-template-mpa

配置

单页应用 vite.config.ts

1import htmlTemplate from 'vite-plugin-html-template-mpa';
2
3export default defineConfig({
4  plugins: [
5    htmlTemplate({
6      minify: true,
7      inject: {
8        data: {
9          title: '我是标题',
10          injectScript: `<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.common.js"></script>`,
11        },
12        tags: [
13          {
14            injectTo: 'body-prepend',
15            tag: 'div',
16            attrs: {
17              id: 'tag',
18            },
19          },
20        ],
21      },
22    }),
23  ],
24});

多页应用 vite.config.ts

1import htmlTemplate from 'vite-plugin-html-template-mpa';
2
3export default defineConfig({
4  plugins: [
5    htmlTemplate({
6      pagesDir: 'src/views',
7      pages: {
8        'test-one': {
9          title: '测试标题',
10          urlParams: 'id=33',
11        },
12        'test-twos': {
13          urlParams: 'id=33',
14          inject: {
15            data: {
16              title: '我是标题',
17              injectScript: `<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.common.js"></script>`,
18            },
19            tags: [
20              {
21                injectTo: 'body-prepend',
22                tag: 'div',
23                attrs: {
24                  id: 'tag',
25                },
26              },
27            ],
28          },
29        },
30      },
31      buildCfg: {
32        moveHtmlTop: true,
33        moveHtmlDirTop: false,
34        buildPrefixName: '',
35        htmlHash: true,
36      },
37    }),
38  ],
39});

配置参数

页面应用参数

1export type PageOptions = {
2  /**
3   * @default public/index.html
4   */
5  template?: string;
6  /**
7   * 页面 title
8   * @default 'Home Page'
9   */
10  title?: string;
11  /**
12   * 入口文件
13   */
14  entry?: string;
15  /**
16   * 模板文件
17   * @default '${pageName}/index.html' at dest
18   */
19  filename?: string;
20  /**
21   * 根页面链接添加参数
22   * @example id=12323&token=0000
23   */
24  urlParams?: string;
25  /**
26   * ejs 注入功能
27   */
28  inject?: InjectOptions;
29};

1export interface Options {
2  /**
3   * 多页应用目录
4   * @default src/views
5   */
6  pagesDir: string;
7  /**
8   * 多页应用配置
9   * @see {@link https://cli.vuejs.org/config/#pages}
10   */
11  pages: {
12    [pageName: string]: PageOptions;
13  };
14  /**
15   * @default '/src/main'
16   */
17  entry?: string;
18  /**
19   * 多页应用程序主页跳转模式
20   */
21  jumpTarget?: '_self' | '_blank';
22  buildCfg: {
23    /**
24     * 生成多页应用添加前缀
25     * @default '' | string
26     */
27    buildPrefixName?: string;
28    /**
29     * 将生成的 index.html 提升至最顶层，并将 index.html 重命名为 多页应用名称.html
30     * @default true
31     */
32    moveHtmlTop?: boolean;
33    /**
34     * 将生成的 index.html 的父目录提升至最顶层
35     * @default false
36     */
37    moveHtmlDirTop?: boolean;
38    /**
39     * 对生成的 html 文件中的 js 与 css 添加唯一的 hash 值
40     * @default false
41     */
42    htmlHash?: boolean;
43    /**
44     * 打包时对 asset 目录增加目录名
45     */
46    buildAssetDirName: string;
47    /**
48     * 打包时对 chunk 目录增加目录名
49     */
50    buildChunkDirName: string;
51    /**
52     * 打包时对 entry 目录增加目录名
53     */
54    buildEntryDirName: string;
55    /**
56     * 要替换生成的 html 中的原字符串（主要是打包的 base 路径处理）
57     */
58    htmlPrefixSearchValue?: string;
59    /**
60     * 替换后的字符串
61     */
62    htmlPrefixReplaceValue?: string;
63  };
64  /**
65   * html 压缩配置
66   * @default true
67   */
68  minify?: MinifyOptions | boolean;
69}

默认压缩配置

collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,

ejs 使用示例

由于多页应用的 ejs 变量，并非所有页面都会注入所以，变量的写法可参照如下

<%if(typeof injectScript !== 'undefined'){%><%-injectScript%><%}%>

1htmlTemplate({
2  pages: {
3    'app-nine': {
4      title: '测试',
5      /** 拼接到 url 后的参数 */
6      urlParams: 'id=211212&token=00000',
7      // 要在模板 html 中注入一些 js 等
8      // 在 public/index.hmtl 需要的位置添加上 <%if(typeof injectScript !== 'undefined'){%><%-injectScript%><%}%>
9      inject: {
10        data: {
11          // 这是在模板中要注入的变量名称(自定义)，主要要在 index.hmtl 插入变量
12          injectScript:
13            '<script src="static/pro-template/js/test-one-11c3eaa8.js"></script>',
14          injectCss: '<link href = "static/pro-template/js/vue-963fdc09.js" >',
15          injectMeta: '<meta charset="UTF-8" />',
16
17          // 也可以用一个变量注入所有的，不要每个都定义
18          injectCode:
19            '<script src="static/pro-template/js/test-one-11c3eaa8.js"></script><link href = "static/pro-template/js/vue-963fdc09.js" >',
20        },
21      },
22    },
23    'app-six': {
24      title: '第六个页面',
25    },
26  },
27  buildCfg: {
28    buildPrefixName: prefixName,
29    moveHtmlTop: true,
30    htmlHash: false,
31    buildAssetDirName: _pageName + '/asset',
32    buildChunkDirName: _pageName + '/js',
33    buildEntryDirName: _pageName + '/js',
34    // htmlPrefixSearchValue: '/static',
35    // htmlPrefixReplaceValue: 'static'
36  },
37});

使用示例

本地调试示例项目需要将根目录中的 _pnpm-workspace.yaml 重命名为 pnpm-workspace.yaml，然后执行 pnpm install 重新安装

单页应用

• src/examples

多页应用

• src/examples

多页应用-固定版本

• src/examples

更多

• 配合 vite-plugin-multi-pages 多页面应用配置: https://github.com/Miofly/vite-plugin-multi-pages
• 配合 vite-plugin-vconsole-mpa 自动配置 vconsole: https://github.com/Miofly/vite-plugin-vconsole-mpa