color-titration-web/vite.config.ts

import { resolve } from 'node:path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig, loadEnv } from 'vite'
import viteCompression from 'vite-plugin-compression'
import eslintPlugin from 'vite-plugin-eslint'
import packageJson from './package.json'

const Timestamp = new Date().getTime()
export default defineConfig(({ mode }) => {
  // eslint-disable-next-line node/prefer-global/process
  const env = loadEnv(mode, process.cwd(), 'FT_')
  return {
    define: {
      __APP_VERSION__: JSON.stringify(packageJson.version),
    },
    base: './',
    envPrefix: 'FT_',
    esbuild: {
    // eslint-disable-next-line node/prefer-global/process
      drop: process.env.NODE_ENV === 'production' ? ['console'] : [],
    },
    build: {
      sourcemap: false,
      outDir: `dist-v${packageJson.version}`,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : []
            const fileName = facadeModuleId.slice(-2)[0] || '[name]'
            return `js/${fileName}/[name].[hash].${Timestamp}.js`
          },
        },
      },
    },
    optimizeDeps: {
      include: ['pug'],
    },
    plugins: [
      vue({
        template: {
          preprocessOptions: {
            // 配置 Pug 预处理器
            pug: {},
          },
        },
      }),
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          { vue: ['withModifiers'] },
          {
            from: 'element-plus/es',
            imports: ['TabPaneName'],
            type: true,
          },
        ],
        dts: true,
        eslintrc: {
          enabled: true,
        },
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      }),
      eslintPlugin({
        cache: false, // 禁用缓存，以确保每次修改后都能及时生效
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
      }),
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        'apis': resolve(__dirname, 'src/apis'),
        'assets': resolve(__dirname, 'src/assets'),
        'components': resolve(__dirname, 'src/components'),
        'hooks': resolve(__dirname, 'src/hooks'),
        'libs': resolve(__dirname, 'src/libs'),
        'stores': resolve(__dirname, 'src/stores'),
        'views': resolve(__dirname, 'src/views'),
        'router': resolve(__dirname, 'src/router'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/variable.scss" as *;',
        },
      },
    },
    // 本地化配置
    server: {
      open: false,
      hmr: true,
      port: 3040,
      host: '0.0.0.0',
      proxy: {
        [env.FT_API_BASE]: {
          target: env.FT_PROXY,
          // secure: false,
          changeOrigin: true, // 是否跨域
          rewrite: path => path.replace(new RegExp(`^${env.FT_API_BASE}`), 'api'),
        },
      },
    },
  }
})