diff --git a/.build/plugins/index.ts b/.build/plugins/index.ts new file mode 100644 index 0000000..c3b1616 --- /dev/null +++ b/.build/plugins/index.ts @@ -0,0 +1,39 @@ +import type { ConfigEnv, PluginOption } from 'vite'; +import path from 'node:path'; +import vue from '@vitejs/plugin-vue'; +import UnoCSS from 'unocss/vite'; +import AutoImport from 'unplugin-auto-import/vite'; +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; +import Components from 'unplugin-vue-components/vite'; +import envTyped from 'vite-plugin-env-typed'; +import createSvgIcon from './svg-icon'; + +const root = path.resolve(__dirname, '../../'); + +function plugins({ mode, command }: ConfigEnv): PluginOption[] { + return [ + UnoCSS(), + envTyped({ + mode, + envDir: root, + envPrefix: 'VITE_', + filePath: path.join(root, 'types', 'import_meta.d.ts'), + }), + vue(), + AutoImport({ + imports: ['vue'], + eslintrc: { + enabled: true, + }, + resolvers: [ElementPlusResolver()], + dts: path.join(root, 'types', 'auto-imports.d.ts'), + }), + Components({ + resolvers: [ElementPlusResolver()], + dts: path.join(root, 'types', 'components.d.ts'), + }), + createSvgIcon(command === 'build'), + ]; +} + +export default plugins; diff --git a/.build/plugins/svg-icon.ts b/.build/plugins/svg-icon.ts new file mode 100644 index 0000000..ebe7617 --- /dev/null +++ b/.build/plugins/svg-icon.ts @@ -0,0 +1,21 @@ +import path from 'node:path'; +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; + +const root = path.resolve(__dirname, '../../'); + +export default function createSvgIcon(isBuild: boolean) { + return createSvgIconsPlugin({ + iconDirs: [ + path.join(root, 'src/assets/icons/svg'), + path.join(root, 'src/assets/icons/Buildings'), + path.join(root, 'src/assets/icons/Business'), + path.join(root, 'src/assets/icons/Device'), + path.join(root, 'src/assets/icons/Document'), + path.join(root, 'src/assets/icons/Others'), + path.join(root, 'src/assets/icons/System'), + path.join(root, 'src/assets/icons/User'), + ], + symbolId: 'icon-[dir]-[name]', + svgoOptions: isBuild, + }); +} diff --git a/package.json b/package.json index 5b2211b..d0c3bc1 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "unplugin-auto-import": "^19.2.0", "unplugin-vue-components": "^28.5.0", "vite": "^6.3.5", + "vite-plugin-env-typed": "^0.0.2", "vue-tsc": "^2.2.10" }, "config": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ea15c7..35ae9d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,6 +117,9 @@ importers: vite: specifier: ^6.3.5 version: 6.3.5(@types/node@22.15.19)(jiti@2.4.2)(sass-embedded@1.89.0)(yaml@2.8.0) + vite-plugin-env-typed: + specifier: ^0.0.2 + version: 0.0.2(vite@6.3.5(@types/node@22.15.19)(jiti@2.4.2)(sass-embedded@1.89.0)(yaml@2.8.0)) vue-tsc: specifier: ^2.2.10 version: 2.2.10(typescript@5.8.3) @@ -2605,6 +2608,11 @@ packages: hachure-fill@0.5.2: resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + handlebars@4.7.8: + resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==} + engines: {node: '>=0.4.7'} + hasBin: true + has-ansi@2.0.0: resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==} engines: {node: '>=0.10.0'} @@ -3395,6 +3403,9 @@ packages: resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==} engines: {node: '>=18'} + neo-async@2.6.2: + resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} + node-fetch-native@1.6.6: resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==} @@ -4358,6 +4369,11 @@ packages: ufo@1.6.1: resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==} + uglify-js@3.19.3: + resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==} + engines: {node: '>=0.8.0'} + hasBin: true + unbox-primitive@1.1.0: resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==} engines: {node: '>= 0.4'} @@ -4494,6 +4510,11 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + vite-plugin-env-typed@0.0.2: + resolution: {integrity: sha512-IloScAeDfhG81diZuvoozs73LvELSG7h3q5Eim035TUbFpou4FanMLpVZqD0lZNH2oMMHILbzx6udmkg3/NFbA==} + peerDependencies: + vite: ^6.0.0 + vite-plugin-svg-icons@2.0.1: resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==} peerDependencies: @@ -4639,6 +4660,9 @@ packages: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} + wordwrap@1.0.0: + resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} + wrap-ansi@6.2.0: resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==} engines: {node: '>=8'} @@ -7586,6 +7610,15 @@ snapshots: hachure-fill@0.5.2: {} + handlebars@4.7.8: + dependencies: + minimist: 1.2.8 + neo-async: 2.6.2 + source-map: 0.6.1 + wordwrap: 1.0.0 + optionalDependencies: + uglify-js: 3.19.3 + has-ansi@2.0.0: dependencies: ansi-regex: 2.1.1 @@ -8545,6 +8578,8 @@ snapshots: natural-orderby@5.0.0: {} + neo-async@2.6.2: {} + node-fetch-native@1.6.6: {} node-releases@2.0.19: {} @@ -9523,6 +9558,9 @@ snapshots: ufo@1.6.1: {} + uglify-js@3.19.3: + optional: true + unbox-primitive@1.1.0: dependencies: call-bound: 1.0.4 @@ -9737,6 +9775,11 @@ snapshots: vary@1.1.2: {} + vite-plugin-env-typed@0.0.2(vite@6.3.5(@types/node@22.15.19)(jiti@2.4.2)(sass-embedded@1.89.0)(yaml@2.8.0)): + dependencies: + handlebars: 4.7.8 + vite: 6.3.5(@types/node@22.15.19)(jiti@2.4.2)(sass-embedded@1.89.0)(yaml@2.8.0) + vite-plugin-svg-icons@2.0.1(vite@6.3.5(@types/node@22.15.19)(jiti@2.4.2)(sass-embedded@1.89.0)(yaml@2.8.0)): dependencies: '@types/svgo': 2.6.4 @@ -9896,6 +9939,8 @@ snapshots: word-wrap@1.2.5: {} + wordwrap@1.0.0: {} + wrap-ansi@6.2.0: dependencies: ansi-styles: 4.3.0 diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index 007ba9d..af7df68 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -8,6 +8,7 @@ const { copy } = useClipboard(); const name = ref(''); const iconList = ref(icons); +console.log(icons); function filterIcons() { iconList.value = JSON.parse(JSON.stringify(icons)); diff --git a/vite.config.ts b/vite.config.ts index 5a9b6a5..b36f387 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,36 +1,15 @@ import { defineConfig, loadEnv } from "vite"; -import vue from "@vitejs/plugin-vue"; -import AutoImport from "unplugin-auto-import/vite"; -import Components from "unplugin-vue-components/vite"; -import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; -import UnoCSS from "unocss/vite"; -import createSvgIcon from "./vite/plugins/svg-icon"; import path from "path"; +import plugins from "./.build/plugins"; -// TODO: 开发一个环境变量ts类型处理的插件 // https://vite.dev/config/ -export default defineConfig(({ mode, command }) => { +export default defineConfig((cnf) => { + const { mode } = cnf; const env = loadEnv(mode, process.cwd()); const { VITE_APP_ENV } = env; return { base: VITE_APP_ENV === "production" ? "/" : "/", - plugins: [ - UnoCSS(), - vue(), - AutoImport({ - imports: ["vue"], - eslintrc: { - enabled: true, - }, - resolvers: [ElementPlusResolver()], - dts: path.resolve(__dirname, "./types/auto-imports.d.ts"), - }), - Components({ - resolvers: [ElementPlusResolver()], - dts: path.resolve(__dirname, "./types/components.d.ts"), - }), - createSvgIcon(command === "build"), - ], + plugins: plugins(cnf), resolve: { alias: { "@": path.resolve(__dirname, "./src"), diff --git a/vite/plugins/svg-icon.ts b/vite/plugins/svg-icon.ts deleted file mode 100644 index a3746c7..0000000 --- a/vite/plugins/svg-icon.ts +++ /dev/null @@ -1,20 +0,0 @@ -import path from 'node:path'; -import process from 'node:process'; // 新增此行引入 process 模块 -import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; - -export default function createSvgIcon(isBuild: boolean) { - return createSvgIconsPlugin({ - iconDirs: [ - path.resolve(process.cwd(), 'src/assets/icons/svg'), - path.resolve(process.cwd(), 'src/assets/icons/Buildings'), - path.resolve(process.cwd(), 'src/assets/icons/Business'), - path.resolve(process.cwd(), 'src/assets/icons/Device'), - path.resolve(process.cwd(), 'src/assets/icons/Document'), - path.resolve(process.cwd(), 'src/assets/icons/Others'), - path.resolve(process.cwd(), 'src/assets/icons/System'), - path.resolve(process.cwd(), 'src/assets/icons/User'), - ], - symbolId: 'icon-[dir]-[name]', - svgoOptions: isBuild, - }); -}