vite_ts_auto/vite.config.ts

import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { defineConfig, UserConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";
import vueJsx from "@vitejs/plugin-vue2-jsx";
import { compression } from "vite-plugin-compression2";
import cdn from "vite-plugin-cdn-import";
import { viteMockServe } from "vite-plugin-mock";

export default defineConfig(
  (): UserConfig => ({
    // base: './', // ? 在每个文件前加上这个前缀
    // publicDir: './static',// ? 设置静态资源目录
    envPrefix: "BUNNY",
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
      }
    },
    server: {
      host: "0.0.0.0",
      port: 6261,
      open: true,
      cors: true,
      proxy: {
        "/api": {
          target: process.env.BUNNY_APP_URL,
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/api/, "/api")
        },
        "/mock": {
          target: process.env.BUNNY_APP_URL,
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/mock/, "/mock")
        }
      }
    },
    plugins: [
      vue(),
      legacy({ targets: ["defaults", "not IE 11"] }),
      vueJsx(),
      compression(),
      cdn({
        modules: []
      }),
      viteMockServe({ mockPath: "src/mock" })
    ],
    esbuild: {
      pure: ["console.log", "debugger"],
      jsxFactory: "h",
      jsxFragment: "Fragment",
      jsxInject: "import { h } from 'vue';"
    },
    // 配置构建过程的选项，例如是否生成压缩文件和源映射
    build: {
      assetsInlineLimit: 20000,
      // 构建输出的目录，默认值为"dist"
      outDir: "dist",
      // 用于指定使用的代码压缩工具。在这里，minify 被设置为 'terser'，表示使用 Terser 进行代码压缩。默认值terser
      // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
      minify: "terser",
      // 用于配置 Terser 的选项
      terserOptions: {
        // 用于配置压缩选项
        compress: {
          drop_console: true, // 是否删除代码中的 console 语句, 默认值false
          drop_debugger: true // 是否删除代码中的 debugger 语句, 默认值false
        }
      },
      // 禁用 gzip 压缩大小报告，可略微减少打包时间
      reportCompressedSize: false,
      // 用于指定是否生成源映射文件。源映射文件可以帮助调试和定位源代码中的错误。当设置为false时，构建过程不会生成源映射文件
      sourcemap: false,
      // 用于配置 CommonJS 模块的选项
      commonjsOptions: {
        // 用于指定是否忽略 CommonJS 模块中的 try-catch 语句。当设置为false时，构建过程会保留 CommonJS 模块中的 try-catch 语句
        ignoreTryCatch: false
      },
      // 规定触发警告的 chunk 大小, 当某个代码分块的大小超过该限制时，Vite 会发出警告
      chunkSizeWarningLimit: 2000,
      // 用于配置 Rollup 打包工具的选项
      rollupOptions: {
        // 用于配置输出选项
        output: {
          // 静态资源分类和包装
          chunkFileNames: "js/[name]-[hash].js", // 用于指定代码分块的输出文件名格式
          entryFileNames: "js/[name]-[hash].js", // 用于指定入口文件的输出文件名格式
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]", // 用于指定静态资源的输出文件名格式
          // ? 配置文件生成方式
          manualChunks: (id, meta) => {
            // 如果是包含在包中则打包成 vendor
            if (id.includes("node_modules")) {
              return "vendor";
            }
          }
        }
      }
    }
  })
);