ai-tagging/web/vite.config.js

/*
 * @Author: yufp
 * @Date: 2024-03-25 10:33:01
 * @LastEditors: zhanglin3
 * @LastEditTime: 2024-10-17 17:42:03
 * @Description: 定义开发和构建的配置
 */
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
import vue2Jsx from '@vitejs/plugin-vue2-jsx';
import { viteExternalsPlugin } from 'vite-plugin-externals';

// 引入svg需要用到的插件, 安装 yarn add vite-plugin-svg-icons
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

// 导入低码代理配置和忽略编译配置
import { getProxyConfig } from './build-proxy';
import insertYuxpProxy from './src/config/yuxp/proxyConfig.js';

// 根据运行模式加载环境变量，并配置Vite
export default ({ mode }) => {
  // 加载环境变量
  const loadEnvVar = loadEnv(mode, process.cwd());
  const {
    VITE_APP_DEV_PORT,
    VITE_APP_BASE_URL,
  } = loadEnvVar;
  const proxy = getProxyConfig(loadEnvVar, insertYuxpProxy);
  const viteHost = '0.0.0.0';
  
  // 判断是否为开发模式
  const isDev = mode === 'development';
  
  // 返回Vite配置对象
  return defineConfig({
    define: {
      'process.env': {},
    },
    base: VITE_APP_BASE_URL, // 设置项目基路径
    plugins: [
      vue2(),
      vue2Jsx(),
      createSvgIconsPlugin({
        // 配置svg图标
        iconDirs: [
          resolve(process.cwd(), 'src/style/svg'),
        ],
        symbolId: 'icon-[name]',
      }),
      // 生产模式下使用 externals
      !isDev && viteExternalsPlugin({
        echarts: 'echarts',
      }),
    ].filter(Boolean), // 过滤掉 false 值
    resolve: {
      alias: {
        package: resolve(__dirname, 'package.json'),
        'yuxp-web': resolve('src'),
        assets: resolve(__dirname, 'src/assets'),
        static: resolve(__dirname, 'public/static'),
        '@': resolve(__dirname, 'src'), // 设置别名为src目录
        vue: resolve('node_modules/vue/dist/vue.esm.js'),
        '@yufp/store': resolve(__dirname, 'node_modules/@yufp/store/vuex/'),
      },
      // 省略后缀
      extensions: ['.vue', '.js', '.json', '.ts'],
    },
    // scss全局变量的配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/style/variables.scss";',
        },
      },
    },
    optimizeDeps: {
      // 其他常用依赖
      include: [
        'vue',
        'echarts',
        'vue-router',
        'vuex',
        'element-ui',
        'axios',
        'lodash',
        // shuffle 集成
        'codemirror/addon/selection/active-line',
        'codemirror/addon/hint/show-hint',
        'codemirror/addon/edit/matchbrackets',
        'codemirror/addon/edit/closebrackets',
        'codemirror/mode/javascript/javascript',
        'codemirror/mode/sql/sql',
        'codemirror/lib/codemirror',
      ],
      esbuildOptions: {
        target: 'es2015',
      },
      exclude: ['@ggzj/shuffle-lite-web'],
    },
    server: {
      // 服务器配置
      port: VITE_APP_DEV_PORT, // 设置开发服务器端口号
      host: viteHost, // 监听所有网络接口
      cors: true, // 启用跨域请求
      proxy: proxy, // 使用定义的代理规则
      // 优化热更新配置
      hmr: {
        overlay: false, // 关闭错误遮罩，提高响应速度
      },
      // 优化文件监听配置
      watch: {
        // 使用数组形式的忽略规则，性能更好
        ignored: [
          '**/node_modules/**',
          '**/.git/**',
          '**/dist/**',
          '**/coverage/**',
          '**/*.log',
          '**/.temp/**',
          '**/.cache/**',
          '**/public/**',
          '**/.vscode/**',
          '**/.idea/**',
        ],
        // 使用原生监听，提高性能
        usePolling: false,
        // 增加防抖延迟，减少频繁触发
        interval: 500,
      },
    },
    build: {
      // 构建配置
      target: 'es2015', // 设置目标浏览器兼容版本
      sourcemap: false, // 是否生成源码映射
      chunkSizeWarningLimit: 2000, // 设置块大小警告限制
      reportCompressedSize: false, // 是否报告压缩后的大小
      // 开发模式下禁用压缩，提高构建速度
      minify: isDev ? false : 'terser',
      cssMinify: !isDev,
      terserOptions: {
        compress: {
          drop_debugger: true,
          drop_console: true,
        },
      },
    },
  });
};