当前位置：首页 > news >正文

Vite Vue3 配置 Composition API 自动导入与项目插件拆分

news 来源：原创 2025/5/30 6:20:00

为了提升开发效率，减少重复引入 ref、reactive、computed 等 Composition API 的繁琐操作，通过 unplugin-auto-import 插件实现自动导入。

1、配置自动导入

1.1 安装插件

npm install -D unplugin-auto-import

1.2 配置

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [vue(),AutoImport({imports: ['vue', 			// ref、active、computed、watch 等'vue-router', 	// useRouter、useRoute 等'pinia'			// defineStore 等],dts: true			// 生成 auto-imports.d.ts 文件，用于 TypeScript 支持})]
})

2、优化（拆分） `vite.config.js`

随着项目规模扩大，vite.config.js 文件可能会变得臃肿。可以将插件配置部分提取到单独的模块中，增强代码组织性和可维护性。

2.1 最终目录结构

project-root/
├── vite.config.js
├── vite/
│   ├── plugins.js
│   ├── auto-import.js
│   └── compression.js

2.2 主配置文件：vite.config.js

import { defineConfig, loadEnv } from 'vite'
import createVitePlugins from './vite/plugins'export default defineConfig(({ mode, command }) => {const env = loadEnv(mode, process.cwd())return {plugins: createVitePlugins(env, command === 'build')}
})

2.3 插件入口文件：vite/plugins.js

import vue from "@vitejs/plugin-vue";import createAutoImport from "./auto-import";
import createCompression from "./compression";export default function createVitePlugins(viteEnv, isBuild = false) {// 基础插件数组，始终包含Vue插件const vitePlugins = [vue()];// 添加自动导入插件vitePlugins.push(createAutoImport());// 如果是生产构建，添加压缩插件isBuild && vitePlugins.push(...createCompression(viteEnv));return vitePlugins;
}

2.4 自动导入插件：vite/auto-import.js

import autoImport from 'unplugin-auto-import/vite'// 自动导入插件
// 使用 unplugin-auto-import 自动导入 Vue、Vue Router 和 Pinia 的 API
// 无需手动导入 ref, reactive, useRouter, useStore 等常用 API
// 直接在代码中使用这些 API，插件会在构建时自动添加导入语句
export default function createAutoImport() {return autoImport({imports: ['vue','vue-router','pinia'],// false不生成类型声明文件，true类型支持dts: false })
}

2.5 构建压缩插件：vite/compression.js

import compression from "vite-plugin-compression";// 压缩插件
// 根据环境变量 VITE_BUILD_COMPRESS 动态配置压缩方式
export default function createCompression(env) {const { VITE_BUILD_COMPRESS } = env;const plugin = [];if (VITE_BUILD_COMPRESS) {const compressList = VITE_BUILD_COMPRESS.split(",");if (compressList.includes("gzip")) {// gzip 压缩plugin.push(compression({ext: ".gz", 				// 压缩文件扩展名deleteOriginFile: false 	// 删除原始文件}))}// brotli 压缩if (compressList.includes("brotli")) {plugin.push(compression({ext: ".br",algorithm: "brotliCompress", // 压缩算法deleteOriginFile: false}))}}return plugin;
}