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

news2025/5/31 12:46:02

为了提升开发效率，减少重复引入 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;
}