insomnia-cognition-h5/vite.config.ts

import type { ConfigEnv, UserConfig } from 'vite'
import { loadEnv } from 'vite'
import dayjs from 'dayjs'
// import vue from "@vitejs/plugin-vue";
import { resolve } from 'path'
import pkg from './package.json'

import { OUTPUT_DIR } from './build/constant'
import { wrapperEnv } from './build/utils'
import { createProxy } from './build/vite/proxy'
import { createVitePlugins } from './build/vite/plugin/index'
import { generateModifyVars } from './build/generate/generateModifyVars'

const pathResolve = (dir: string) => {
  return resolve(process.cwd(), '.', dir)
}

const { dependencies, devDependencies, name, version } = pkg
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
}

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()
  const env = loadEnv(mode, pathResolve('env'))
  const viteEnv = wrapperEnv(env)
  const { VITE_PORT, VITE_PROXY, VITE_PUBLIC_PATH } = viteEnv

  // 是否构建
  const isBuild = command === 'build'

  return {
    base: VITE_PUBLIC_PATH,
    root,
    server: {
      // 监听到本地IP
      host: true,
      port: VITE_PORT,
      // 本地开发的代理配置
      proxy: createProxy(VITE_PROXY)
    },
    build: {
      target: 'es2015',
      outDir: OUTPUT_DIR,
      minify: 'esbuild',
      // 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
      // brotliSize: false,
      // chunk 大小警告的限制（以 kbs 为单位）。
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: '[ext]/[name].[hash].[ext]',
          // 用于命名代码拆分时创建的共享块的输出命名
          // chunkFileNames: "js/[name].[hash].js",
          // 拆分js到模块文件夹
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
            const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'

            // const reg = new RegExp(/\/src\/views(\S*)\/index\.vue/);
            // const itemPath = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.match(reg) || [] : [];
            // if (chunkInfo.name && ["vue", "vue-router"].includes(chunkInfo.name)) {
            //   return `assets/[name].js`;
            // }
            // if (chunkInfo.name && chunkInfo.name.includes("demo-")) {
            //   return `js/demo/[name].[hash].js`;
            // }
            return `js/${fileName}/[name].[hash].js`
          }
          // manualChunks: (id) => {
          //   const itemPath = id.match(RegExp(/\/src\/views\/demo(\S*)\/index\.vue/));
          //   if (itemPath) {
          //     const [, modPath] = itemPath[1].split("/");
          //     return `demo-${modPath}`;
          //   }
          // },
        }
      }
    },
    resolve: {
      // 别名
      alias: [
        // /@/xxxx => src/xxxx
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/'
        },
        // /#/xxxx => types/xxxx
        {
          find: /\/#\//,
          replacement: pathResolve('types') + '/'
        }
      ]
    },
    // 构建模式所需的特有配置
    plugins: createVitePlugins(viteEnv, isBuild),
    // css配置
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: generateModifyVars(),
          javascriptEnabled: true
        }
      }
    },
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__)
    }
  }
}