vite.config.ts 基本通用配置

vite.config.ts 基本通用配置

基本满足日常大型开发，vite本身也默认支持很多

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue'; // 提供 Vue 3 单文件组件支持,在插件中使用
// import { redirect } from 'vite-plugin-url-redirect';
import { join } from 'path';
import eslintPlugin from 'vite-plugin-eslint'; // 校验eslint规则
import { createHtmlPlugin } from 'vite-plugin-html'; // HTML 压缩能力

// https://vitejs.dev/config/
//  导出方法是为了方便动态获取环境变量
export default ({ mode }) => {
  const envDir = join(__dirname, '../');
  process.env = { ...process.env, ...loadEnv(mode, envDir) };
  return defineConfig({
    envDir, // 用于加载 .env 文件的目录
    base: '', // 基础路径 开发或生产环境服务的公共基础路径
    // 构建选项
    build: {
      outDir: '../dist', // 指定输出路径（相对于 项目根目录)
      // 传递给 @rollup/plugin-commonjs 插件的选项。支持CommonJS的插件，这样就可以解析CommonJS模块了
      // 鉴于npm公开的包都是commonjs模块公开，所以需要将使用的commonjs转换为es6供rollup编译
      commonjsOptions: {
        ignoreTryCatch: false,
        exclude: ['node_modules/dagre'],
      },
      minify: 'terser', // 会强制降级为 'es2021' 并说明压缩类型
      // 对terser 压缩选项配置 传递给 Terser 的更多 minify 选项。
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
    resolve: {
      // 项目中引导的别名 配置
      alias: [
        {
          find: '@/common',
          replacement: join(__dirname, '../common'),
        },
        {
          find: '@',
          replacement: join(__dirname, './src'),
        },
      ],
    },
    // 需要用到的插件数组
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => /^micro-app/.test(tag),
          },
        },
      }),
      eslintPlugin({
        cache: false,
        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.jsx', 'src/**/*.ts'],
        exclude: ['./node_modules/**'],
      }),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            // eslint-disable-next-line @typescript-eslint/no-var-requires
            version: mode === 'dev' ? require('./public/version.json').version : 'dev',
          },
        },
      }),
    ],
    // 本地服务的配置
    server: {
      port: 8888, // 端口 默认5173
      open: true,
      host: '0.0.0.0', // 主机地址 默认localhost
      // 代理配置
      proxy: {
        '/api': {
          target: process.env.VITE_APP_API_HOST, // 配置
          changeOrigin: true,
          rewrite: (path) => {
            return path;
          },
        },
      },
    },
  });
};