vite-plugin-html-template-mpa

vite-plugin-html-template-mpa

English | 中文

Important Update

• Since the 'vite-plugin-html' plugin is no longer maintained, there will be a warning when the 'vite 5.0' version is launched, so this plugin is compatible with the functionality of this plugin in single-page applications.
• The 'API' related to version '> 1.0.0' has been adjusted, please note that the latest version already supports 'Vite 5.0.0'.

The default value of 'pagesDir' for multi-page apps has been adjusted to 'src/views', if you have problems using multi-page apps, please use it with 'vite-plugin-multi-pages'

Features

• HTML compression capability
• Single page and multi page application support
• Support customization entry、template
• Support multi page applications to generate home pages, including jump paths of all pages
• The support packaging directory has changed its' HTML 'name and path
• support resource addition hash in html pages

How to use

Install

yarn add vite-plugin-html-template-mpa
# or
pnpm add vite-plugin-html-template-mpa

Usage

Single page application vite.config.ts

import htmlTemplate from 'vite-plugin-html-template-mpa';

export default defineConfig({
  plugins: [
    htmlTemplate({
      minify: true,
      inject: {
        data: {
          title: 'title text',
          injectScript: `<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.common.js"></script>`,
        },
        tags: [
          {
            injectTo: 'body-prepend',
            tag: 'div',
            attrs: {
              id: 'tag',
            },
          },
        ],
      },
    }),
  ],
});

Multi page application vite.config.ts

import htmlTemplate from 'vite-plugin-html-template-mpa';

export default defineConfig({
  plugins: [
    htmlTemplate({
      pagesDir: 'src/views',
      pages: {
        'test-one': {
          title: 'testTitle',
          urlParams: 'id=33',
        },
        'test-twos': {
          urlParams: 'id=33',
          inject: {
            data: {
              title: 'title text',
              injectScript: `<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.common.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag',
                },
              },
            ],
          },
        },
      },
      buildCfg: {
        moveHtmlTop: true,
        moveHtmlDirTop: false,
        buildPrefixName: '',
        htmlHash: true,
      },
      data: {
        title: 'defaultTitle',
      },
    }),
  ],
});

Options

page application parameters

export type PageOptions = {
  /**
   * @default public/index.html
   */
  template?: string;
  /**
   * page title
   * @default 'Home Page'
   */
  title?: string;
  /**
   * entry file
   */
  entry?: string;
  /**
   * template file
   * @default '${pageName}/index.html' at dest
   */
  filename?: string;
  /**
   * add parameters to the root page link
   * @example id=12323&token=0000
   */
  urlParams?: string;
  /**
   * @description inject options
   */
  inject?: InjectOptions;
}

export interface Options {
  /**
   * multi page application directory
   * @default src/pages
   */
  pagesDir: string;
  /**
   * multi page application configuration
   * @see {@link https://cli.vuejs.org/config/#pages}
   */
  pages: {
    [pageName: string]: PageOptions;
  };
  /**
   * @default '/src/main'
   */
  entry?: string;
  /**
   * multi page application home page jump mode
   */
  jumpTarget?: '_self' | '_blank';
  buildCfg: {
    /**
     * generate multi page application add prefix
     * @default '' | string
     */
    buildPrefixName?: string;
    /**
     * The generated index HTML to the top, and index Rename HTML to multi page application name html
     * @default true
     */
    moveHtmlTop?: boolean;
    /**
     * The generated index The parent directory of HTML is promoted to the top level
     * @default false
     */
    moveHtmlDirTop?: boolean;
    /**
     * Add a hash to the resources in the generated HTML file
     * @default false
     */
    htmlHash?: boolean;
    /**
     * build asset dir add name
     */
    buildAssetDirName: string;
    /**
     * build chunk dir add name
     */
    buildChunkDirName: string;
    /**
     * build entry dir add name
     */
    buildEntryDirName: string;
    /**
     * To replace the original string in the generated html (mainly packaged base path processing)
     */
    htmlPrefixSearchValue?: string;
    /**
     * replace string
     */
    htmlPrefixReplaceValue?: string;
  };
  /**
   * Minimize options
   * @default true
   */
  minify?: MinifyOptions | boolean;
}

default compression configuration

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

ejs usage example

Since not all pages are injected into EJS variables for multi-page applications, the variables can be written as follows

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

htmlTemplate({
  pages: {
    'app-nine': {
      title: 'test',
      /** Parameters after splicing to URL */
      urlParams: 'id=211212&token=00000',
      // To inject some JS into the template HTML
      // in public/index.hmtl add the required location <%if(typeof injectScript !== 'undefined'){%><%-injectScript%><%}%>
      inject: {
        data: {
          // This is the variable name (custom) to be injected in the template, mainly in the index : hmtl inserting variables
          injectScript:
            '<script src="static/pro-template/js/test-one-11c3eaa8.js"></script>',
          injectCss: '<link href = "static/pro-template/js/vue-963fdc09.js" >',
          injectMeta: '<meta charset="UTF-8" />',

          // You can also inject all with one variable instead of defining each
          injectCode:
            '<script src="static/pro-template/js/test-one-11c3eaa8.js"></script><link href = "static/pro-template/js/vue-963fdc09.js" >',
        },
      },
    },
    'app-six': {
      title: 'sixthPage',
    },
  },
  buildCfg: {
    buildPrefixName: prefixName,
    moveHtmlTop: true,
    htmlHash: false,
    buildAssetDirName: _pageName + '/asset',
    buildChunkDirName: _pageName + '/js',
    buildEntryDirName: _pageName + '/js',
    // htmlPrefixSearchValue: '/static',
    // htmlPrefixReplaceValue: 'static'
  },
});

use examples

The local debugging sample project requires renaming '_pnpm-workspace.yaml' in the root directory to 'pnpm-workspace.yaml' and then performing a 'pnpm install' reinstall

single page application

• src/examples

multi page application

• src/examples

多页应用-固定版本

• src/examples

MORE

• Cooperate with vite-plugin-multi-pages multi page application configuration: https://github.com/Miofly/vite-plugin-multi-pages
• Cooperate with vite-plugin-vconsole-mpa to automatically configure vconsole: https://github.com/Miofly/vite-plugin-vconsole-mpa