vue3-vite2打包构建

import vue from '@vitejs/plugin-vue'
import path from 'path'
import glob from 'glob'
import { defineConfig } from 'vite'
import styleImport from 'vite-plugin-style-import' // 按需加载
import viteCompression from 'vite-plugin-compression' // gz压缩
import viteImagemin from 'vite-plugin-imagemin' // 压缩图片 npm比较慢 先注释了
import { injectHtml } from 'vite-plugin-html' // HTML
import importToCDN from 'vite-plugin-cdn-import'
import { CDN_BASE, DEV_API } from './src/config'
function resolve(dir) {
  return path.join(__dirname, dir);
}
export default ({ mode }) => { // { mode, command } mode: development,production command: serve, build
  console.log(CDN_BASE)
  const isPro = mode === 'production'
  const base = isPro ? CDN_BASE : './'
  // const isBuild = command === 'build'
  // const localEnabled = process.env.USE_MOCK || false // mock是否开启
  // const prodEnabled = false
  // 自定义 yapi mock
  let mockProxy = {};
  if (!isPro) {
    const mockCwd = resolve("./mock");
    glob
      .sync(`**/*.js`, {
        cwd: mockCwd,
      })
      .forEach((item) => {
        const cur = require(`${mockCwd}/${item}`);
        if (Array.isArray(cur)) {
          cur.forEach((item) => {
            const { url, target } = item;
            console.log("启动自定义 mock", url);
            mockProxy[url] = {
              target,
              ws: false,
              changeOrigin: true,
              logLevel: "debug",
            };
          });
        }
      });
  }
  return defineConfig({
    define: { // 定义vite全局环境变量
      'process.env': {
        ...process.env,
        'VITE_ENV': mode,
      }
    },
    build: {
      assetsDir: "assets", // 静态资源文件夹
      // outDir: "jzx-monitor",
      brotliSize: false, // 配置项关闭打包计算
      terserOptions: { // 生产环境移除 console
        compress: {
          keep_infinity: true,
          drop_console: isPro,
        }
      },
      minify: 'terser', // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
      rollupOptions: {
        external: [] // rollupOptions build externals
      }
    },
    plugins: [
      vue(),
      styleImport({ // 按需加ant-design-vue组件
        libs: [
          {
            libraryName: 'ant-design-vue',
            esModule: true,
            resolveStyle: name => `ant-design-vue/es/${name}/style/index`
          }
        ]
      }),
      // styleImport({
      //   libs: [
      //     {
      //       libraryName: 'vant',
      //       esModule: true,
      //       resolveStyle: (name) => `vant/es/${name}/style`,
      //     },
      //   ],
      // }),
      viteCompression({ // 生成压缩包gz
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
      }),
      // viteImagemin({
      //   gifsicle: {
      //     optimizationLevel: 7,
      //     interlaced: false,
      //   },
      //   optipng: {
      //     optimizationLevel: 7,
      //   },
      //   mozjpeg: {
      //     quality: 20,
      //   },
      //   pngquant: {
      //     quality: [0.8, 0.9],
      //     speed: 4,
      //   },
      //   svgo: {
      //     plugins: [
      //       {
      //         name: 'removeViewBox',
      //       },
      //       {
      //         name: 'removeEmptyAttrs',
      //         active: false,
      //       },
      //     ],
      //   },
      // }),
      injectHtml({ // HTML 内容插入 修改title
        injectData: {
          title: "监控系统"
        },
      }),
      // eslint({
      //   throwOnError: true,
      //   throwOnWarning: true,
      //   include: ['src/**'],
      //   exclude: ['node_modules/**', 'dist/**'],
      // }),
    ],
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // hack: `true; @import (reference) "${resolve('src/assets/css/theme.less')}";`,
          }, // 重写 less 变量，定制样式
          javascriptEnabled: true // 开启js解析
        },
        sass: {
          // 支持内联 JavaScript
          javascriptEnabled: true,
        },
        scss: {
          // 支持内联 JavaScript
          javascriptEnabled: true,
        },
      }
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      }
    },
    hostname: '127.0.0.1',
    port: 3000,
    // 是否自动在浏览器打开
    open: true,
    // 是否开启 https
    https: false,
    // 服务端渲染
    ssr: false,
    /**
     * 在生产中服务时的基本公共路径。
     * @default '/'
     */
    base,
    /**
     * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
     * @default 'dist'
     */
    outDir: 'dist',
    // 反向代理，此处应该特别注意，网上很多教程是直接设置proxy，并没有向官网那样添加 server，可能会导致失败，vite官网：https://vitejs.dev/guide/features.html#async-chunk-loading-optimization
    server: {
      host: "0.0.0.0",
      proxy: {
        ...mockProxy,
        '/api': {
          target: DEV_API, // DEV_API
          changeOrigin: true,
          // rewrite: path => path.replace(/^\/dxapi/, '/dxapi'),
          logLevel: "debug"
        }
      }
    },
  })
}