https://github.com/fe6/vite-plugin-html-mpa

vite 的多页面配置插件
https://github.com/fe6/vite-plugin-html-mpa

Last synced: 4 days ago
JSON representation

vite 的多页面配置插件

• Host: GitHub
• URL: https://github.com/fe6/vite-plugin-html-mpa
• Owner: fe6
• License: mit
• Created: 2021-06-05T13:39:56.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-16T07:49:35.000Z (over 3 years ago)
• Last Synced: 2024-11-08T23:03:25.782Z (9 days ago)
• Language: TypeScript
• Size: 118 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-html-mpa

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



  

  

   

  

  

    

  

  

    

  

  

    

  



## 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 ``.

## Usage

```sh

yarn add vite-plugin-html-mpa

```

```ts

// vite.config.ts

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

// @see https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    // ...other plugins

    htmlTemplate(/* options */),

  ],

})

```

## Options

[例子参考](https://github.com/fe6/water-pro)

```ts

// 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',

  },

}

```

- [更多配置](https://github.com/IndexXuan/vite-plugin-html-mpa/blob/main/src/lib/options.ts)

## Underlying

- Thanks to [vite-plugin-virtual-html](https://github.com/Windson1806/vite-plugin-virtual-html)

- Thanks to [vite-plugin-vue-cli](https://github.com/IndexXuan/vite-plugin-vue-cli/blob/main/src/index.ts#L165)

## Further

- [vue-cli-plugin-vite](https://github.com/IndexXuan/vue-cli-plugin-vite)

- [vite-plugin-mpa](https://github.com/IndexXuan/vite-plugin-mpa)