一套自用的vue3的 vite的配置

配置了哪些功能

1. 按需加载ElementPlus
2. 项目中可以不使用import
3. 自定义elementPlus主题样式
4. 不同环境打包时是否console.log等
5. 分包，输出文件合并等，避免加载时等待bug，无法跳转的bug等
6. 打包输出的文件目录配置
7. src配置为@
8. 代理
9. Gzip打包压缩

import vue from "@vitejs/plugin-vue";
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ElementPlus from "unplugin-element-plus/vite";
//GZIP
import viteCompression from "vite-plugin-compression";
import { svgBuilder } from "./src/utils/svgBuilder";

// https://vitejs.dev/config/
export default ({ mode }) => {
  console.log(mode);
  //参数mode为开放模式或生产模式
  //console.log(mode);  // development or product
  const env = loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
  //console.log(env);   //变量在命令行里打印出来
  let base: string;
  let isConsole: boolean;
  if (mode === "qa" || mode === "dev" || mode === "sit") {
    isConsole = false;
  } else {
    isConsole = true;
  }
  if (mode === "sit") {
    base = "/";
  } else {
    base = "/client/";
  }
  return defineConfig({
    base,
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
        include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
        imports: ["vue", "vue-router", "vuex", "vue-i18n"],
        dts: "./auto-imports.d.ts",
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
      }),
      ElementPlus(),
      // viteCompression({
      //   deleteOriginFile:true
      // }),
      svgBuilder("./src/assets/svg/"), // 将src/assets/svg下的svg全部导入，无需再单独导入
    ],
    build: {
      assetsDir: "./static",
      chunkSizeWarningLimit: 500,
      minify: "terser",
      cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
      terserOptions: {
        compress: {
          // warnings: false,
          drop_console: isConsole, //打包时删除console
          drop_debugger: true, //打包时删除 debugger
          // pure_funcs: ["console.log"],
        },
      },
      rollupOptions: {
        output: {
          entryFileNames: `static/entry/[name][hash].js`,
          chunkFileNames: `static/chunk/[name][hash].js`,
          assetFileNames: `static/file/[name][hash].[ext]`,
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return id
                .toString()
                .split("node_modules/")[1]
                .split("/")[0]
                .toString();
            }
            if (id.includes("views/user")) {
              return "views-user";
            }
            if (id.includes("views/a")) {
              return "views-a";
            }
            if (id.includes("views/b")) {
              return "views-b";
            }
            if (id.includes("views/c")) {
              return "views-c";
            }
          },
        },
      },
    },
    resolve: {
      extensions: [".ts", ".vue", ".json"],
      alias: {
        "@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
      },
    },

    server: {
      port: 4100, // 设置服务启动端口号
      open: true, // 设置服务启动时是否自动打开浏览器
      cors: true, // 允许跨域
      host: "0.0.0.0",
      // 设置代理，根据我们项目实际情况配置
      // proxy: {
      //   "/api": {
      //     target: env.VITE_APP_API,
      //     changeOrigin: true,
      //     secure: false,
      //     rewrite: (path) => path.replace('^/api', '/'),
      //   },
      // },
    },
    css: {
      //css预处理
      preprocessorOptions: {
        scss: {
          /*
          引入var.scss全局预定义变量，
          如果引入多个文件，
          可以使用
          '@import "@/assets/scss/globalVariable1.scss";@import "@/assets/scss/globalVariable2.scss";'
          这种格式
           */
          additionalData: '@use "@/assets/scss/elementRepair.scss" as *;',
        },
      },
    },
  });
};