SaaS-lib/build/vite-default.config.ts

/** @format */

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { basename, resolve } from 'path';
import dayjs from 'dayjs';
import pkg from '../package.json';
import vueJsx from '@vitejs/plugin-vue-jsx';
import legacy from '@vitejs/plugin-legacy';
import { generateModifyVars } from './less';
import { theme } from './theme';

const { dependencies, devDependencies, name, version } = pkg;
//设置分包和合并包的策略
const output = {
  manualChunks(id: any): string {
    const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`;
    const cssLangRE = new RegExp(cssLangs);
    const isCSSRequest = (request: string): boolean => cssLangRE.test(request);
    // && !isCSSRequest(id)
    if (id.includes('style.css')) {
      // if (isCSSRequest(id)) {
      // 需要单独分割那些资源 就写判断逻辑就行
      return 'src/style.css';
    }
    // // 最小化拆分包
    if (id.includes('node_modules')) {
      return id.toString().split('node_modules/')[1].split('/')[0].toString();
    }
    // 分manifest包，解决chunk碎片问题
    if (id.includes('src')) {
      return 'manifest';
    }
  },
};
export default function nsDefineConfig(params: {
  serviceMode: 'saas' | 'paas';
  dirname: string;
  baseDir: string;
  proxy?: object;
  customOutput?: boolean;
}) {
  const { serviceMode, dirname, baseDir, customOutput = false } = params;

  function pathResolve(dir: string): string {
    return resolve(dirname, '.', dir);
  }

  // @ts-ignore
  return defineConfig(({ mode, command }) => {
    //运行信息
    const __APP_INFO__ = {
      platform: process.env.PLATFORM,
      pkg: { dependencies, devDependencies, name, version },
      buildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      serviceMode,
    };
    console.log('mode', mode);
    const env = loadEnv(mode, dirname);
    const { VITE_PORT, VITE_PROXY = '{}', VITE_LEGACY, VITE_PUBLIC_PATH } = env;
    const port = Number(VITE_PORT);
    const proxy = params.proxy ? params.proxy : JSON.parse(VITE_PROXY);
    const isBuild = command === 'build';
    const server = {
      host: true,
      port,
      proxy,
      fs: {
        allow: ['..'],
      },
    };
    const config: any = {
      base: VITE_PUBLIC_PATH,
      cacheDir: `${baseDir}node_modules/.vite-${basename(dirname)}`,
      build: {
        target: ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14'],

        assetsDir: 'asset',
        brotliSize: false,
        // target: 'esnext',
        rollupOptions: {
          external: [],
        },
      },
      resolve: {
        alias: [
          {
            find: 'vue-i18n',
            replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
          },
          {
            find: /\/@\//,
            replacement: pathResolve('src') + '/',
          },
          {
            find: /\/nerv-lib\//,
            replacement: pathResolve('../lib') + '/',
          },
          {
            find: /\/nerv-base\//,
            replacement: pathResolve(`../lib/${serviceMode}`) + '/',
          },
          {
            find: 'antd/lib',
            replacement: 'antd/es',
          },
          {
            find: '@antv/x6',
            replacement: '@antv/x6/dist/x6.js',
          },
          {
            find: 'flv.js',
            replacement: 'flv.js/dist/flv.min.js',
          },
        ],
      },
      server,
      define: {
        __APP_INFO__: JSON.stringify(__APP_INFO__),
      },
      css: {
        preprocessorOptions: {
          less: {
            modifyVars: {
              ...generateModifyVars({
                dark: false,
                paths: [
                  pathResolve(`${baseDir}lib/${serviceMode}/theme/variable.less`),
                  pathResolve('./src/theme/variable.less'),
                ],
              }),
            },
            javascriptEnabled: true,
          },
        },
      },
      plugins: [
        vue(),
        vueJsx(),
        theme({ isProd: mode !== 'development' }),
        VITE_LEGACY &&
          isBuild &&
          legacy({
            targets: ['defaults', 'not IE 11'],
          }),
        createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [
            pathResolve('src/icon'),
            pathResolve(`${baseDir}lib/${serviceMode}/asset/icon`),
          ],
          svgoOptions: isBuild,
          symbolId: 'icon-[dir]-[name]',
        }),
      ],
    };

    if (customOutput) {
      config.build.rollupOptions['output'] = output;
    }

    return config;
  });
}