maotu-webtopo/vite.config.ts

import { fileURLToPath, URL } from 'node:url';

import { defineConfig, UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';
import UnoCSS from 'unocss/vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  let config: UserConfigExport = {
    plugins: [
      vue(),
      dts({
        tsconfigPath: 'tsconfig.app.json'
      }),
      UnoCSS({
        // 在低版本浏览器上开发时会报错 Unexpected reserved word
        // 如果在开发环境需要兼容不支持顶级await的低版本浏览器例如Chrome(v87)，就将下面的配置打开
        // hmrTopLevelAwait: false
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'mt-edit-[name]',
        // 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
        svgoOptions: false,
        customDomId: '___mt__edit__icons__dom__'
      })
    ],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
      dedupe: ['vue']
    }
  };
  if (mode === 'lib' || mode === 'npm') {
    config = {
      ...config,
      ...{
        build: {
          lib: {
            entry: resolve(__dirname, 'src/export.ts'),
            name: 'maotu',
            fileName: (format: any) => `maotu.${format}.js`
          },
          rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖
            external: ['vue', 'pinia'],
            output: {
              // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
              globals: {
                vue: 'Vue',
                pinia: 'Pinia'
              },
              inlineDynamicImports: true
            }
          }
        }
      }
    };
  }
  return config;
});