vite-plugin-config-helper

vite-plugin-config-helper

一个用于更改默认 vite.config.ts 文件，将配置逻辑分离到 build 目录文件的插件。

如果项目存在 build 目录，且包含 index.ts 或者 plugins.ts 文件， 则插件将不会更改 vite.config.ts 文件。

可以利用这个插件来整合之前写的 vite-plugin-env-helper 和 vite-plugin-scan-routes 插件，还可以拓展其他配置，例如 element-plus 组件，来快速搭建项目框架。

该插件只在项目初始搭建时起作用，搭建完成后会自动删除自身，所以不需要关注本库的大小及优化！

运行逻辑：

首先会判断在项目根目录下是否存在 /build/config/index.ts 或 /build/config/plugin.ts 文件，不存在则继续执行，

然后判断是否存在 .env 文件，并在该文件中以 VITE_APP_BASE_URL VITE_APP_PROXY_URL VITE_APP_PORT 这三个键承接插件传入参数 baseUrl proxyUrl port 。

在这个插件的开发过程中，不断添加的参数增加了复杂度，先是整合自己的两个插件，然后又想加 element-plus tailwindcss 等，边界的扩大导致了使用的复杂，最后决定整合 element-plus 然后稳定下来，这就已经可以实现比较全面的基础模板了。

安装

npm i -D vite-plugin-config-helper

使用

配置 vite.config.ts

• 利用vue 或 vite 官方脚手架创建 vue 项目后，在 vite.config.ts 添加以下内容，然后执行命令 vite 。

• 检查 package.json 文件，重新安装依赖。

• 经过上面的操作，本插件会帮我们改造 vite.config.ts 配置文件，并将一些插件配置（element-plus）拆分到 /build/config 目录中，不用每次都去官网复制粘贴，能快速初始化一个干净的项目。

import vue from '@vitejs/plugin-vue'
import { defineConfig, type UserConfig, type ConfigEnv } from 'vite'
import {configHelper} from 'vite-plugin-config-helper'


export default defineConfig((config: ConfigEnv): UserConfig => {
    
    return {
        plugins: [
            vue(),
            // 路由插件是自用的，感兴趣可自行查询，实现了 unplugin-vue-router 部分功能：约定式路由。
            // element-plus 最好是 2.10.5 以上版本
            // configHelper() // 默认值如下
            configHelper({ 
                port: 5173,
                baseUrl: '/api',
                proxyUrl: 'http://192.168.0.193:9999' ,
                pluginEnvHelper: true,
                pluginScanRoutes: false,
                pluginElementPlus: true
            })
        ]
    }
})

说明

插件运行后会更改已有的一些文件并添加一些文件，变动如下：

├── build/                
│ ├── config/             # 插件配置目录
│ │ ├── index.ts          # 主配置文件
│ │ ├── plugins.ts        # vite 默认配置文件
│ │ └── ep.ts             # ElementPlus 配置文件，包括组件和样式自动导入等
├── src/                  
│ ├── components/         # 组件目录
│ │ └── FormBuilder.vue   # 自用组件
│ ├── types/              # ts类型文件目录
│ │ ├── auto-imports.d.ts # unplugin-auto-import 配置生成
│ │ ├── components.d.ts   # unplugin-vue-components 配置生成
│ │ └── ep.d.ts           # ElementPlus 配置文件，包括组件和样式自动导入等
│ ├── hooks/              # hook 目录
│ │ └── color.ts          # ElementPlus 动态更改主题色
├── .env                  # vite-plugin-env-helper 添加的环境变量配置文件
├── eslint.config.ts      # vite-plugin-env-helper 更改后的配置文件
├── vite.config.ts        # 修改后的 vite 配置
└── package.json          # 修改后的依赖