vite.config.ts 3.13 KB
import { resolve } from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
import WindiCSS from 'vite-plugin-windicss'
import VueJSX from '@vitejs/plugin-vue-jsx'
import { globalVariablePlugin } from '@wry-smile/vite-plugin-global-variable'
import legacy from '@vitejs/plugin-legacy'
import { generateModifyVars } from './build/config/generate/generateModifyVars'
import { injectEnv } from './build/config/env'
import type { GlobEnvConfig } from './types/config'
import { createProxy } from './build/config/vite/proxy'
import { wrapperEnv } from './build/config/utils'
import { OssPlugin } from './build/config/vite/ossPlugin'

function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir)
}

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const root = process.cwd()
  const env = loadEnv(mode, root) as unknown as GlobEnvConfig
  const { VITE_GLOB_PUBLIC_PATH, VITE_PROXY, VITE_GLOB_SHORT_NAME, VITE_GLOB_ENABLE_OSS, VITE_GLOB_OSS_ADDRESS } = wrapperEnv(env)

  return {
    mode,
    base: VITE_GLOB_PUBLIC_PATH,
    resolve: {
      alias: [
        {
          find: /@\//,
          replacement: `${pathResolve('src')}/`,
        },
        {
          find: /#\//,
          replacement: `${pathResolve('types')}/`,
        },
        {
          find: 'vue',
          replacement: `${pathResolve('./node_modules/vue/dist/vue.esm-browser.js')}`,
        },
      ],
    },
    server: {
      proxy: createProxy(VITE_PROXY),
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: generateModifyVars(),
          javascriptEnabled: true,
        },
      },
    },
    plugins: [
      legacy(),
      vue(),
      VueJSX(),
      WindiCSS(),
      globalVariablePlugin(),
      createHtmlPlugin({
        inject: {
          tags: [
            {
              tag: 'script',
              injectTo: 'head-prepend',
              children: injectEnv({
                variable:
                {
                  mode,
                  base: VITE_GLOB_PUBLIC_PATH,
                  shortName: VITE_GLOB_SHORT_NAME,
                  enableOss: VITE_GLOB_ENABLE_OSS,
                  ossAddress: VITE_GLOB_OSS_ADDRESS,
                },
              }),
            },
          ],
        },
      }),
      OssPlugin({ enableOss: VITE_GLOB_ENABLE_OSS }),
    ],
    build: {
      sourcemap: true,
      emptyOutDir: true,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('/node_modules/vue/dist/vue.esm-browser.js'))
              return 'vue'

            if (id.includes('ant-design-vue'))
              return 'ant-design-vue'

            if (id.includes('lodash-es'))
              return 'lodash-es'

            if (id.includes('echarts'))
              return 'echarts'

            if (id.includes('node_modules'))
              return 'lib'
          },
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        },
      },
    },
  }
})