Vite 不怎么优雅但能用的多页面方式

博主：空指针
发布时间：2024 年 02 月 10 日
596 次浏览
2 条评论
1251字数
分类：酒馆杂谈

在根目录下创建多页面入口 xxx.html:

<!DOCTYPE HTML>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
  </head>
  <body style="margin: 0;">
    <div id="root"></div>
    <script type="module" src="/src/pages/xxx/main.jsx"></script>
  </body>
</html>

在 vite.config.js 中配置解析（需要安装 vite-plugin-html）。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      minify: true,
      pages: [{
        entry: 'src/pages//login/main.jsx',
        template: 'login.html',
        filename: 'login.html'
      }, {
        entry: 'src/pages//panel/main.jsx',
        template: 'panel.html',
        filename: 'panel.html'
      }, {
        entry: 'src/pages//index/main.jsx',
        template: 'index.html',
        filename: 'index.html'
      },
      ]
    })
  ],
  root: '.',
  build: {
    rollupOptions: {
      input: {
        index: 'index.html',
        login: 'login.html',
        panel: 'panel.html',
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    },
  }
})

最后修改：2024 年 02 月 10 日