import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue2";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
import babel from "vite-plugin-babel";
import dns from "dns";

import vueJsx from "@vitejs/plugin-vue2-jsx";
import langJsx from "vite-plugin-lang-jsx";
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

import { injectHtml } from "vite-plugin-html";
import { svgBuilder } from "./src/assets/js/svgBuilder";

dns.setDefaultResultOrder("verbatim");
export default defineConfig(({ mode }) => {
  // 加载环境变量，因为 vite 中不会加载以 VUE 开头的，我们得自己指定下
  const envPrefix = ["VUE"];
  const env = loadEnv(mode, process.cwd(), envPrefix);
  return {
    plugins: [
      // 必须写在vue、vueJsx之前
      langJsx()[1],
      vue(),
      vueJsx({}),
      viteCommonjs(),
      // 这里已经将src/icons/svg/下的svg全部导入，无需再单独导入
      svgBuilder("./src/icons/"),
      // createSvgIconsPlugin({
      //   iconDirs: [path.resolve(process.cwd(), "src/icons")], // icon存放的目录
      //   symbolId: "icon-[name]", // symbol的id
      //   // inject: "body-last", // 插入的位置
      //   // customDomId: "__svg__icons__dom__" // svg的id
      // }),

      babel({
        filter: /^.*node_modules\/element-ui.*\.js?$/,
      }),
      nodePolyfills({
        // Whether to polyfill `node:` protocol imports.
        protocolImports: true,
      }),
      injectHtml({
        minify: true,
        template: "./index.html",
        // entry: "./src/main.js", // 这个会帮我们注入入口 js 文件
        // entry: "src/main.js", // 这个会帮我们注入入口 js 文件
        data: {
          // 这是我们 index.html 用到的环境变量
          ...env,
          title: '',
          injectScript: `<script type="module" src="./src/main.js"></script>`
        },
      }),
    ],
    server: {
      host: "0.0.0.0",
      port: 8080,
    },
    base: "./",
    resolve: {
      extensions: [".js", ".vue"],
      alias: [{ find: /^@\/(.*)$/, replacement: "/src/$1" }],
    },
  };
});