hcp_h5/vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { mkdir, readFile, writeFile } from 'node:fs/promises'
import { resolve } from 'node:path'

import { defineConfig, loadEnv, UserConfig, type Plugin, type ResolvedConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const TRAINING_PAGE_TITLE = '医药代表合规培训'
const TRAINING_PAGE_PATHS = ['compliance-plan', 'compliance-registration', 'training-entry']

const trainingPageHtmlPlugin = (): Plugin => {
  let resolvedConfig: ResolvedConfig

  return {
    name: 'training-page-html',
    apply: 'build',
    configResolved(config) {
      resolvedConfig = config
    },
    async closeBundle() {
      const outputDirectory = resolve(resolvedConfig.root, resolvedConfig.build.outDir)
      const indexHtml = await readFile(resolve(outputDirectory, 'index.html'), 'utf8')
      const trainingPageHtml = indexHtml.replace(
        /<title>.*?<\/title>/,
        `<title>${TRAINING_PAGE_TITLE}</title>`,
      )

      await Promise.all(
        TRAINING_PAGE_PATHS.map(async (pagePath) => {
          const pageDirectory = resolve(outputDirectory, pagePath)
          await mkdir(pageDirectory, { recursive: true })
          await writeFile(resolve(pageDirectory, 'index.html'), trainingPageHtml, 'utf8')
        }),
      )
    },
  }
}

// https://vite.dev/config/
export default defineConfig(({ mode }): UserConfig => {
  const root = process.cwd()
  const env = loadEnv(mode, root)
  // const isProduction = mode === 'production'

  return {
    base: '/h5/',
    plugins: [vue(), trainingPageHtmlPlugin()].filter(Boolean),
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },

    server: {
      open: false,
      proxy: {
        '/api': {
          target: env.VITE_APP_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },

    build: {
      rollupOptions: {
        output: {
          entryFileNames: `assets/[name].[hash].js`,
          chunkFileNames: `assets/[name].[hash].js`,
          assetFileNames: `assets/[name].[hash].[ext]`,
          // 使用 Vite 原生 manualChunks 替代 chunk-split 插件
          manualChunks(id: string) {
            if (id.includes('node_modules')) {
              if (id.includes('@vant/area-data')) return 'area-data'
              if (id.includes('lodash-es')) return 'vendor-lodash'
              if (id.includes('echarts')) return 'vendor-echarts'
              return 'vendor'
            }
          },
        },
      },
    },
  }
})