002 vue3-admin项目的目录及文件说明之vite.config.ts文件

说明

vite.config.ts 是 Vite 构建工具的配置文件，用于自定义 Vite 的行为和功能。

基本结构

// Vite构建工具的核心配置文件，用于自定义项目构建行为
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
// node 中的模块引入
import path from "path"
import UnoCSS from "unocss/vite"

// element-plus 自动导入
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import { fileURLToPath } from "url" // 新增导入
import ElementPlus from "unplugin-element-plus/vite"
// element-plus 自动导入end

//配置选项： https://vite.dev/config/
// defineConfig：Vite 提供的类型辅助函数，用于获得更好的 TypeScript 类型提示
// 导出的对象为 Vite 的核心配置对象
export default defineConfig({
  // 作用：配置 Vite 插件扩展功能
  // vue()：这是 @vitejs/plugin-vue 插件的默认导出，用于支持 Vue 单文件组件 (SFC) 的编译
  // 注意：使用前需确保已安装依赖 pnpm add -D @vitejs/plugin-vue
  plugins: [
    vue(),
    UnoCSS(),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      // 解析element-plus的api
      resolvers: [ElementPlusResolver()],
      dts: fileURLToPath(new URL("./auto-import.d.ts", import.meta.url)),
      // 省去显示导入import语句，eslint会报错，此处就是解决eslint报错的
      // 给eslint生成的配置，只需要一次即配一次true即可，其他改为false
      eslintrc: {
        enabled: false,
        filepath: fileURLToPath(new URL("./.eslintrc-auto-import.json", import.meta.url)),
        globalsPropValue: true
      }
    }),
    Components({
      // 解析element-plus的组件
      dirs: ["src/components", "src/layout/components"],
      resolvers: [ElementPlusResolver()]
    }),
    // 按需导入后，配置element-plus的样式
    ElementPlus({})
  ],
  // 解析相关配置
  resolve: {
    // alias 用于设置路径别名
    alias: [
      {
        // find：需要被替换的路径别名标识
        find: "@",
        // replacement：实际文件系统路径
        replacement: path.resolve(__dirname, "src")
      }
    ]
  },
  server: {
    // 配置代理(反向代理)
    proxy: {
      "/dev-api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dev-api/, "/api")
      }
    }
  },
  }
})

安装依赖

pnpm add -D @vitejs/plugin-vue unocss unplugin-auto-import unplugin-vue-components unplugin-element-plus

核心配置项

1 插件配置

plugins: [
    vue(),
    UnoCSS(),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      // 解析element-plus的api
      resolvers: [ElementPlusResolver()],
      dts: fileURLToPath(new URL("./auto-import.d.ts", import.meta.url)),
      // 省去显示导入import语句，eslint会报错，此处就是解决eslint报错的
      // 给eslint生成的配置，只需要一次即配一次true即可，其他改为false
      eslintrc: {
        enabled: false,
        filepath: fileURLToPath(new URL("./.eslintrc-auto-import.json", import.meta.url)),
        globalsPropValue: true
      }
    }),
    Components({
      // 解析element-plus的组件
      dirs: ["src/components", "src/layout/components"],
      resolvers: [ElementPlusResolver()]
    }),
    // 按需导入后，配置element-plus的样式
    ElementPlus({})
  ]

vue()：
- 作用：支持 Vue 单文件组件 (SFC) 的编译
- 依赖：@vitejs/plugin-vue
UnoCSS()：
- 作用：提供原子化 CSS 框架支持
- 特点：比 Tailwind CSS 更轻量、更灵活
AutoImport：
- 作用：自动导入常用 API，无需手动 import
- 配置项：
  - imports：自动导入的包（Vue、Vue Router、Pinia）
  - resolvers：Element Plus 解析器，自动导入 Element Plus API
  - dts：生成类型声明文件路径
  - eslintrc：生成 ESLint 配置，解决自动导入的 ESLint 报错问题
Components：
- 作用：自动注册组件，无需手动 import 和注册
- 配置项：
  - dirs：要扫描的组件目录
  - resolvers：Element Plus 解析器，自动注册 Element Plus 组件
ElementPlus：
- 作用：按需导入 Element Plus 组件的样式
- 配合：与 AutoImport 和 Components 配合使用，实现 Element Plus 的完全按需导入

2 路径解析配置 (resolve)

resolve: {
  alias: [
    {
      find: "@",
      replacement: path.resolve(__dirname, "src")
    }
  ]
}

作用：配置路径别名，简化导入路径
配置：
- find: "@"：定义别名标识
- replacement: path.resolve(__dirname, "src")：实际文件系统路径

使用示例：可以用 @/components/Button.vue 代替 src/components/Button.vue

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      'components': resolve(__dirname, 'src/components'),
      'utils': resolve(__dirname, 'src/utils')
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

alias：路径别名配置
extensions：导入时可省略的扩展名

3 开发服务器配置 (server)

server: {
  proxy: {
    "/dev-api": {
      target: "http://localhost:3000",
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/dev-api/, "/api")
    }
  }
}

作用：配置开发服务器的代理，解决跨域问题
配置：
- /dev-api：匹配以 /dev-api 开头的请求
- target：目标服务器地址
- changeOrigin：修改请求头中的 Origin
- rewrite：重写请求路径，将 /dev-api 替换为空

export default defineConfig({
  server: {
    port: 3000,
    host: true,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

port：开发服务器端口
host：允许外部访问
open：自动打开浏览器
proxy：代理配置，解决跨域问题

4 构建配置

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          utils: ['lodash-es']
        }
      }
    }
  }
})

outDir：输出目录
assetsDir：静态资源目录
sourcemap：是否生成源映射
minify：压缩方式
terserOptions：压缩选项
rollupOptions：Rollup 配置，用于代码分割等

5 CSS 配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        globalVars: {
          primaryColor: '#1890ff'
        }
      }
    },
    devSourcemap: true
  }
})

preprocessorOptions：预处理器配置
devSourcemap：开发环境生成 CSS 源映射

6 环境变量配置

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    define: {
      'process.env': env
    }
  }
})

loadEnv：加载环境变量
define：定义全局常量

高级配置示例

完整的 Vite 配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    // 基础配置
    base: env.VITE_BASE_URL || '/',
    
    // 插件配置
    plugins: [
      vue(),
      vueJsx(),
      
      // 自动导入
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        resolvers: [ElementPlusResolver()],
        dts: 'auto-imports.d.ts'
      }),
      
      // 自动导入组件
      Components({
        resolvers: [ElementPlusResolver()],
        dts: 'components.d.ts'
      }),
      
      // SVG 图标
      createSvgIconsPlugin({
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]'
      })
    ],
    
    // 解析配置
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    
    // 服务器配置
    server: {
      port: 3000,
      host: true,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    
    // 构建配置
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: false,
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: mode === 'production',
          drop_debugger: mode === 'production'
        }
      },
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'vue-router', 'pinia'],
            element: ['element-plus'],
            utils: ['lodash-es']
          }
        }
      }
    },
    
    // CSS 配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables.scss";`
        }
      },
      devSourcemap: true
    }
  }
})

常用插件推荐

1 自动导入插件

import AutoImport from 'unplugin-auto-import/vite'

plugins: [
  AutoImport({
    imports: ['vue', 'vue-router', 'pinia'],
    dts: 'auto-imports.d.ts'
  })
]

2 组件自动注册

import Components from 'unplugin-vue-components/vite'

plugins: [
  Components({
    dirs: ['src/components'],
    dts: 'components.d.ts'
  })
]

3 SVG 图标支持

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

plugins: [
  createSvgIconsPlugin({
    iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]'
  })
]

4 PWA 支持

import { VitePWA } from 'vite-plugin-pwa'

plugins: [
  VitePWA({
    registerType: 'autoUpdate',
    includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
    manifest: {
      name: 'My App',
      short_name: 'MyApp',
      theme_color: '#ffffff'
    }
  })
]

配置最佳实践

1 开发环境优化

配置代理解决跨域问题
启用 CSS 源映射
配置路径别名提高开发效率

2 生产环境优化

代码分割减少初始加载时间
压缩代码减小体积
移除控制台日志提高安全性

3 性能优化

合理配置 manualChunks 进行代码分割
使用 CDN 加载第三方库
配置缓存策略

总结

vite.config.ts 是 Vite 构建工具的核心配置文件，通过它可以自定义 Vite 的各种行为。合理配置 Vite 可以显著提高开发效率和应用性能，是现代前端工程化的重要组成部分。

posted @ 2025-11-16 10:58 Allen_Hao 阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

allenxx