@xaios/vite-plugin-multiple-pages NPM

vite.config.js 配置

import MultiplePages from '@xaios/vite-plugin-multiple-pages'

const CONFIG = {
  // html: 'index.html',   // 自定义全局页面模板路径，路径相对此文件，可以不传，格式参考请看下文
  // icon: 'favicon.ico',  // 自定义全局页面图标，值直接填入，默认值为空
  list: [{
    // html: '',           // 自定义私有页面模板路径，一般不需要配置
    // icon: '',           // 自定义私有页面图标，一般不需要配置
    name: 'main',          // 页面名称，将根据此配置寻找入口与生成页面
    title: 'main',         // 页面标题，为空则取 name 值，也可以在代码中通过 document.title 动态更新
    // entry: 'index.js'   // 自定义页面入口文件，值直接填入，默认填充规则为：`/src/pages/${name}/index.js`
  }]
}

// 也可以直接作为数组传入，此时视为直接传入 list 的内容
// const CONFIG = [{ name: 'main', title: 'main' }]

export default {
  plugins: [MultiplePages(CONFIG)]
}

HTML 模板示例

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link type='image/x-icon' rel='shortcut icon' href='<%= ICON %>'>
    <title><%= TITLE %></title>
  </head>

  <body>
    <div id='app'></div>
  </body>

  <script type='module' src='<%= SRC %>'></script>
</html>