hi-sass-frame/.electron-vite/vite.config.mts

import {join} from "path";
import {defineConfig} from "vite";
import vuePlugin from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import viteIkarosTools from "./plugin/vite-ikaros-tools";
import {getConfig} from "./utils";
import dayjs from "dayjs";

/**
 * 自动引用功能
 */
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
/**
 * SVG图标
 */
import {createSvgIconsPlugin} from "vite-plugin-svg-icons";

/**
 * univerJs插件
 */
import {univerPlugin} from "@univerjs/vite-plugin";

import UnoCSS from "unocss/vite";

/**
 * 需要预加载的资源
 */
import {preloads} from "./preloads";
import pkg from "../package.json";

function resolve(dir: string) {
	return join(__dirname, "..", dir);
}

const config = getConfig();

/** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示 */
const __APP_INFO__ = {
	pkg: pkg,
	buildTimestamp: Date.now(),
	lastBuildTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
};

const root = resolve("src/renderer");
const src = resolve("src");
// const theme: string = resolve("src/renderer/themes/default");
// const theme: string = resolve("src/renderer/themes/geeker");
const themeGeeker: string = resolve("src/renderer/themes/geeker");
const themeDefault: string = resolve("src/renderer/themes/default");
const mode = config && config.NODE_ENV;

export default defineConfig({
	mode: mode,
	root: root,
	define: {
		__CONFIG__: config,
		__ISWEB__: Number(config && config.target),
		__APP_INFO__: JSON.stringify(__APP_INFO__),
		"process.env": process.env,
	},
	resolve: {
		alias: {
			"@": root,
			"@api": join(root, "/api"),
			"@config": join(src, "../config"),
			"@main": join(src, "/main"),
			"@mock": join(root, "/mock"),
			"@renderer": root,
			"@src": src,
			"@store": join(root, "/store/modules"),
			// "@theme": theme,
			"@themeDefault": themeDefault,
			"@themeGeeker": themeGeeker,
		},
	},
	base: "./",
	build: {
		outDir:
			config && config.target
				? resolve("dist/web")
				: resolve("dist/electron/renderer"),
		emptyOutDir: true,
		target: "esnext",
		cssCodeSplit: false,
	},
	css: {
		// CSS 预处理器
		preprocessorOptions: {
			// 定义全局 SCSS 变量
			scss: {
				javascriptEnabled: true,
				additionalData: `
            @use "@themeDefault/styles/variables.scss" as *;
						@use "@themeGeeker/styles/var.scss" as *;
          `,
			},
		},
	},
	server: {
		//   无须配置
	},
	plugins: [
		vuePlugin(),
		// jsx、tsx语法支持
		vueJsx(),
		viteIkarosTools(),
		//CSS预处理
		UnoCSS({
			hmrTopLevelAwait: false,
		}),
		//   univerjs的虚拟化插件技术，用于语言包的自动引用
		univerPlugin(),

		// 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
		AutoImport({
			// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
			imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
			resolvers: [
				// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
				ElementPlusResolver(),
				// 自动导入图标组件
				IconsResolver({}),
			],
			// 是否在 vue 模板中自动导入
			vueTemplate: true,
			// 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
			// dts: false,
			dts: "fixTypes/auto-imports.d.ts",
		}),
		Components({
			resolvers: [
				// 自动导入 Element Plus 组件
				ElementPlusResolver(),
				/**
				 * 自动注册图标组件
				 */
				IconsResolver({
					// element-plus图标库，其他图标库 https://icon-sets.iconify.design/
					enabledCollections: ["ep"],
				}),
			],
			/**
			 * 指定自定义组件位置(默认:src/components)
			 * TBD：  resolve("@theme/components")，测试用法，效果未知
			 */
			// dirs: ["src/components", join(theme, "/components"), join(theme, "/**/components")],
			dirs: [
				"src/components",
				join(themeDefault, "/components"),
				join(themeDefault, "/**/components"),
				"src/**/components",
			],
			// 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
			// dts: false,
			dts: "fixTypes/components.d.ts",
		}),
		Icons({
			// 自动安装图标库
			autoInstall: true,
		}),
		createSvgIconsPlugin({
			// 指定需要缓存的图标文件夹
			iconDirs: [
				join(themeDefault, "assets/icons"),
				join(themeGeeker, "assets/icons"),
				"@renderer/assets/icons",
			],
			// 指定symbolId格式
			symbolId: "icon-[dir]-[name]",
		}),
	],
	optimizeDeps: preloads,
});