/ vite.config.mts
vite.config.mts
  1  /// <reference types="vitest" />
  2  
  3  import { dirname, relative } from "node:path";
  4  import type { UserConfig } from "vite";
  5  import { defineConfig } from "vite";
  6  import Vue from "@vitejs/plugin-vue";
  7  import Icons from "unplugin-icons/vite";
  8  import IconsResolver from "unplugin-icons/resolver";
  9  import Components from "unplugin-vue-components/vite";
 10  import AutoImport from "unplugin-auto-import/vite";
 11  import { isDev, port, r } from "./scripts/utils";
 12  import packageJson from "./package.json";
 13  
 14  export const sharedConfig: UserConfig = {
 15    root: r("src"),
 16    resolve: {
 17      alias: {
 18        "~/": `${r("src")}/`,
 19      },
 20    },
 21    define: {
 22      __DEV__: isDev,
 23      __NAME__: JSON.stringify(packageJson.name),
 24    },
 25    plugins: [
 26      Vue(),
 27  
 28      AutoImport({
 29        imports: [
 30          "vue",
 31          {
 32            "webextension-polyfill": [["=", "browser"]],
 33          },
 34        ],
 35        dts: r("src/auto-imports.d.ts"),
 36      }),
 37  
 38      // https://github.com/antfu/unplugin-vue-components
 39      Components({
 40        dirs: [r("src/components")],
 41        // generate `components.d.ts` for ts support with Volar
 42        dts: r("src/components.d.ts"),
 43        resolvers: [
 44          // auto import icons
 45          IconsResolver({
 46            prefix: "",
 47          }),
 48        ],
 49      }),
 50  
 51      // https://github.com/antfu/unplugin-icons
 52      Icons(),
 53  
 54      // rewrite assets to use relative path
 55      {
 56        name: "assets-rewrite",
 57        enforce: "post",
 58        apply: "build",
 59        transformIndexHtml(html, { path }) {
 60          return html.replace(
 61            /"\/assets\//g,
 62            `"${relative(dirname(path), "/assets")}/`
 63          );
 64        },
 65      },
 66    ],
 67    optimizeDeps: {
 68      include: ["vue", "@vueuse/core", "webextension-polyfill"],
 69      exclude: ["vue-demi"],
 70    },
 71  };
 72  
 73  export default defineConfig(({ command }) => ({
 74    ...sharedConfig,
 75    base: command === "serve" ? `http://localhost:${port}/` : "/dist/",
 76    server: {
 77      port,
 78      hmr: {
 79        host: "localhost",
 80      },
 81      origin: `http://localhost:${port}`,
 82    },
 83    build: {
 84      watch: isDev ? {} : undefined,
 85      outDir: r("extension/dist"),
 86      emptyOutDir: false,
 87      sourcemap: isDev ? "inline" : false,
 88      // https://developer.chrome.com/docs/webstore/program_policies/#:~:text=Code%20Readability%20Requirements
 89      terserOptions: {
 90        mangle: false,
 91      },
 92      rollupOptions: {
 93        input: {
 94          options: r("src/options/index.html"),
 95          popup: r("src/popup/index.html"),
 96        },
 97        external: ["/docs"],
 98      },
 99    },
100    test: {
101      globals: true,
102      environment: "jsdom",
103    },
104  }));