marking-paper-struct-web/vite.config.ts

import path from "path";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

const resolvePath = (...args: any[]) => {
  return path.resolve(__dirname, ...args);
};
const env = loadEnv("development", process.cwd(), "");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({ reactivityTransform: true }),
    vueJsx({}),
    Components({ resolvers: [AntDesignVueResolver({ importStyle: false })] }),
    createSvgIconsPlugin({
      iconDirs: [resolvePath("src/assets/icons")],
      symbolId: "icon-[dir]-[name]",
      customDomId: "__svg__icons__dom__",
    }),
    vueSetupExtend(),
  ],
  resolve: {
    extensions: [".vue", ".js", ".ts", ".jsx", ".tsx", ".json"],
    alias: [
      { find: "@", replacement: resolvePath("src") },
      { find: "@api", replacement: resolvePath("src/apis") },
      { find: "@imgs", replacement: resolvePath("src/assets/images") },
      { find: "@hooks", replacement: resolvePath("src/hooks") },
    ],
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData(content, context) {
          if (context.includes("antd.theme.less")) {
            return (
              content +
              `\r\n@import "${resolvePath("src/assets/less/var.less")}";`
            );
          }
          return (
            `@import "${resolvePath("src/assets/less/var.less")}";\r\n` +
            content
          );
        },
        javascriptEnabled: true,
      },
    },
  },
  server: {
    port: 9020,
    proxy: {
      "^/api": {
        target: env.VITE_APP_DEV_PROXY,
      },
    },
  },
});