vite.config.ts

import { defineConfig, loadEnv } from "vite"
import vue from "@vitejs/plugin-vue"
import { fileURLToPath, URL } from "node:url"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
import { createStyleImportPlugin, ElementPlusResolve } from "vite-plugin-style-import"
import legacy from "@vitejs/plugin-legacy"
import viteCompression from "vite-plugin-compression"
import mockDevServerPlugin from "vite-plugin-mock-dev-server"
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import sentryVitePlugin from "vite-plugin-sentry"
import path from "path"
// @ts-ignore 屏蔽ts检测此行代码
import EslintPlugin from "vite-plugin-eslint"
import ElementPlus from "unplugin-element-plus/vite"

// https://vitejs.dev/config/
export default defineConfig((mode): any => {
  const env = loadEnv(mode.mode, process.cwd())
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => /^micro-app/.test(tag)
          }
        }
      }),
      ElementPlus({
        useSource: true
      }),
      EslintPlugin({
        cache: false,
        include: ["src/**/*.vue", "src/**/*.ts", "src/**/*.tsx"] // 检查的文件
      }),
      AutoImport({
        imports: ["vue", "vue-router"], // 自动引入相关api
        resolvers: [
          ElementPlusResolver(), // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          IconsResolver({
            // 设置自动导入的图标组件前缀
            prefix: "icon",
            // 标识自定义图标集
            customCollections: ["ci"]
          })
        ]
      }),
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            // 设置自动导入的图标组件前缀
            prefix: "icon",
            // 标识自定义图标集
            customCollections: ["ci"]
          })
        ]
      }),
      Icons({
        compiler: "vue3",
        autoInstall: true
      }),
      // svg 配置
      createSvgIconsPlugin({
        // Specify the icon folder to be cached // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
        // Specify symbolId format // 指定symbolId格式
        symbolId: "icon-[dir]-[name]"
      }),
      //按需自动引入 elementplus 相关样式文件
      createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
          {
            libraryName: "element-plus",
            esModule: true,
            resolveStyle: (name) => {
              // 屏蔽element-plus不需要按需加载样式的选项
              if (name === "click-outside" || name === "dayjs") {
                return ""
              }
              return `element-plus/es/components/${name.replace(/^el-/, "")}/style/css`
            }
          }
        ]
      }),
      legacy({
        targets: ["defaults", "not IE 11"]
      }),
      viteCompression({
        verbose: true,
        disable: false,
        deleteOriginFile: false,
        // 文件大于 100Kb 开启压缩
        threshold: 100000,
        algorithm: "gzip",
        ext: "gz"
      }),
      mode.mode === "prd"
        ? sentryVitePlugin({
            // 必填参数
            authToken: "edf1f5c3b3c64603a1ec8d73768c5c10e4c0411163684beb9f7c3c2bb4f17fb5", // 稍后展示创建方法
            org: "sentry", // 默认写死
            project: "cbo-ms-web", // 写自己的项目名
            release: process.env.npm_package_version, // 使用 package.json 中的版本号 稍后增加可自增的版本号方法
            // 可选参
            url: "https://monitor.aiyouyi.cn/", // sentry网站地址 同https://monitor.ceboss.cn/
            deploy: {
              env: "production"
            },
            setCommits: {},
            sourceMaps: {
              include: ["./dist/assets"], // 根据实际情况设置
              ignore: ["node_modules"],
              urlPrefix: "~/assets"
            }
          })
        : null,
      env.VITE_MOCK_DEV_SERVER === "true" ? mockDevServerPlugin() : null
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)) //配置@ 代替src
      }
    },
    server: {
      port: 5171,
      fs: {
        strict: false
      },
      //过 Vite 配置反向代理解决浏览器跨域问题
      proxy: {
        /** 代理前缀为 /dev-api 的请求  */
        [env.VITE_API_BASE_PATH]: {
          changeOrigin: true,
          // 接口地址
          // target: "http://localhost:5171",
          target: "https://pre-tenant.gmarketing.tech/tenant-web",
          rewrite: (path: any) => path.replace(new RegExp("^" + env.VITE_API_BASE_PATH), "")
        }
      }
    },
    build: {
      outDir: "dist",
      chunkSizeWarningLimit: 1500,
      rollupOptions: {
        output: {
          entryFileNames: `assets/[name].${new Date().getTime()}.js`,
          chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
          assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
          compact: true,
          // manualChunks: {
          // 	vue: ['vue', 'vue-router', 'pinia'],
          // 	echarts: ['echarts'],
          // antvG6: ['@antv/g6'],
          // elementPlus: ['element-plus'],
          // },
          manualChunks(id: string[]) {
            // if (id.includes("style.css")) {
            // 	// 需要单独分割那些资源 就写判断逻辑就行
            // 	return 'src/style.css';
            // }
            // if (id.includes("HelloWorld.vue")) {
            // 	// 单独分割hello world.vue文件
            // 	return 'src/components/HelloWorld.vue';
            // }
            // // 最小化拆分包
            if (id.includes("node_modules")) {
              return id.toString().split("node_modules/")[1].split("/")[0].toString()
            }
          }
        }
      },
      minify: "terser",
      terserOptions: {
        compress: {
          // drop_console: mode.mode === "prd",
          drop_debugger: mode.mode === "prd"
        }
      },
      sourcemap: mode.mode !== "prd"
    },
    //sass配置
    //上面导入的 SCSS 全局变量在 TypeScript 不生效的，需要创建一个以 .module.scss 结尾的文件
    css: {
      devSourcemap: true,
      preprocessorOptions: {
        css: { charset: false },
        // 定义全局 SCSS 变量
        scss: {
          javascriptEnabled: true,
          additionalData: `@use "@/styles/variables.scss" as *;`
        }
      }
    }
  }
})