create-sf-vue/templates/typescript/vite.config.ts

一个基于 Vite + Vue3 的项目模板脚手架，支持 TypeScript 和 JavaScript。

import { defineConfig, loadEnv } from "vite";
import type { ConfigEnv, UserConfig } from "vite";
import vue from "@vitejs/plugin-vue"; // Vue 3 支持
import AutoImport from "unplugin-auto-import/vite"; // 自动导入 Vue API 等
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; // SVG 精灵图插件
import path from "path";
import Components from "unplugin-vue-components/vite"; // 组件自动按需导入
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // Element Plus 自动导入解析器
import Icons from "unplugin-icons/vite"; // 图标自动按需导入
import IconsResolver from "unplugin-icons/resolver"; // 图标解析器
import vueDevTools from "vite-plugin-vue-devtools"; // Vue 开发者工具插件

export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd());

  // 动态导入 UnoCSS 插件，避免直接 import 导致启动慢
  const UnoCss = await import("unocss/vite").then((i) => i.default);

  return {
    // 开发服务器配置
    server: {
      host: "0.0.0.0", // 本机和局域网可访问
      port: +env.VITE_APP_PORT, // 使用环境变量配置端口
      open: true, // 启动时自动打开浏览器
      proxy: {
        // 接口代理，解决跨域问题
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_API_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
        },
      },
    },
    plugins: [
      vue(), // Vue 插件
      vueDevTools(), // Vue 开发者工具
      UnoCss(), // UnoCSS 插件
      AutoImport({
        imports: ["vue"], // 自动导入 Vue API（如 ref、reactive）
        dts: "src/types/auto-imports.d.ts", // 生成 TypeScript 声明文件
        eslintrc: {
          enabled: true, // 生成 ESLint 配置
          filepath: "./.eslintrc-auto-import.json",
        },
        resolvers: [
          ElementPlusResolver(), // 自动按需导入 Element Plus 组件
          IconsResolver({
            // 图标组件解析
            prefix: "Icon", // 使用 Icon 前缀调用图标组件
          }),
        ],
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], // SVG 图标目录
        symbolId: "icon-[dir]-[name]", // 生成 symbolId 格式
      }),
      Components({
        dirs: ["src/components", "src/views"], // 扫描组件和页面目录
        extensions: ["vue"], // 扫描 .vue 文件
        deep: true, // 扫描子目录
        resolvers: [
          ElementPlusResolver(), // 自动按需导入 Element Plus 组件
          IconsResolver({
            enabledCollections: ["ep"], // 使用 Element Plus 图标集合
          }),
        ],
        dts: "src/types/components.d.ts", // 自动生成 TypeScript 组件声明
      }),
      Icons({
        autoInstall: true, // 缺少图标自动安装
      }),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          // 在每个 SCSS 文件开头自动引入全局变量
          additionalData: '@use "@/styles/variable.scss" as *;',
        },
      },
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"), // @ 别名指向 src
      },
    },
  };
});