vite-plugin-html-mpa
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

vite-plugin-html-mpa

HTML template for vite app, like html-webpack-plugin for webpack.

wakatime NPM Publish downloads npm version License: MIT

Motivation

  • Vite need html for entry file, which means we must have
    • projectRoot/index.html for SPA
    • projectRoot/src/pages/*/index.html for MPA
  • Why not we use html template for all entry html
  • Also we should support ejs/lodash.template syntax for the html content, like setting <title></title>.

Usage

yarn add vite-plugin-html-mpa
// vite.config.ts
import htmlTemplate from 'vite-plugin-html-mpa'

// @see https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...other plugins
    htmlTemplate(/* options */),
  ],
})

Options

例子参考

// for SPA, you can do nothing, auto reuse public/index.html as template

// for MPA, you can custom template path(default is public/index.html) and page title
{
  // where pages ?
  pagesDir: 'src/pages',
  // define pages like vue-cli
  pages: {
    index: {
      template: './public/index.html',
      title: 'Home Page',
    },
    subpage: {
      template: './src/pages/subpage/index.html',
      title: 'Sub Page',
    },
  },
  // expose to template
  data: {
    title: 'Home Page',
  },
}

Underlying

Further

Package Sidebar

Install

npm i vite-plugin-html-mpa

Weekly Downloads

3

Version

1.0.4

License

MIT

Unpacked Size

233 kB

Total Files

12

Last publish

Collaborators

  • fe6