idea>> vite-plugin-html-template>> 返回
项目作者： IndexXuan

项目描述 ：
html template for vite, like html-webpack-plugin for webpack.
高级语言： TypeScript
项目地址: git://github.com/IndexXuan/vite-plugin-html-template.git
创建时间： 2021-04-07T07:52:19Z
项目社区：https://github.com/IndexXuan/vite-plugin-html-template
开源协议：
下载


vite-plugin-html-template

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

It works perfectly together with vite-plugin-mpa.


wakatime

NPM Publish


downloads


npm version


License: MIT

Motivation

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

Usage

  1. yarn add -D vite-plugin-html-template
  1. // vite.config.ts
  2. import htmlTemplate from 'vite-plugin-html-template'
  4. // @see https://vitejs.dev/config/
  5. export default defineConfig({
  6.   plugins: [
  7.     // ...other plugins
  8.     htmlTemplate(/* options */),
  9.   ],
  10. })

Options

  • like vue-cli#pages
    ``ts // for SPA, there is nothing to do, just usepublic/index.html` as template

// for MPA, customise the template path (default is public/index.html) and page title:
{
// where is the pages’ root directory?
pagesDir: ‘src/pages’,
// define pages like it is done in vue-cli
pages: {
index: {
template: ‘./public/index.html’,
title: ‘Homepage’,
},
subpage: {
template: ‘./src/pages/subpage/index.html’,
title: ‘Subpage’,
},
},
// expose to template
data: {
title: ‘Homepage’,
},
}
```

Underlying

Further