vite-plugin-config-helper

简化 vite.config.ts 文件配置，快速集成基于 element-plus UI 的项目。

安装

pnpm i vite-plugin-config-helper -D

使用

利用 vite 或 create-vue 脚手架创建项目后直接安装该插件，在 vite.config.ts 进行配置即可。

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import {configHelper} from 'vite-plugin-config-helper'


export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        vueDevTools(),
        configHelper()
        /** 默认值如下
         * 1. 本插件默认会安装 element-plus 的最新版本（>= 2.11.7）（2.10.5 开始提供了 select 的 options 属性）
         * 2. 配置项 pluginEnvHelper 是用于扩展 .env 功能的，port baseUrl proxyUrl 都能通过 vite-plugin-env-helper 进行管理
         * 3. 配置项 pluginScanRoutes 是自用的，感兴趣可自行查询，实现了 unplugin-vue-router 部分功能：约定式路由。
         * 4. 配置项 proxyUrl 是 vite 开发服务器代理地址
         * 5. 配置项 baseUrl 是 vite 开发服务器代理地址的代理前缀
         */
        // configHelper({
        //     port: 5173,
        //     baseUrl: '/api',
        //     proxyUrl: 'http://192.168.0.193:9999',
        //     pluginEnvHelper: true,
        //     pluginScanRoutes: false,
        //     pluginElementPlus: true
        // })
    ]
})

说明

最初只是想实现 vite.config.ts 配置项的分离功能来提高可读性，但做着做着发现这里要做的事情太多了。最初是将改造的 vite.config.ts 内容以字符串形式硬编码到项目里，但随着字符串越来越多，代码可读性也变差。于是把代码写入文件中，直接从文件里读取提高可读性。

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

运行逻辑：

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

基本结构

插件运行后会更改已有的一些文件并添加一些文件，变动如下(即版本0.2.9，之后的版本就复杂了)：

├── build/                
│ ├── config/             # 插件配置目录
│ │ ├── index.ts          # 主配置文件
│ │ ├── plugins.ts        # vite 默认配置文件
│ │ └── ep.ts             # ElementPlus 配置文件，包括组件和样式自动导入等
├── locales/              # 语言文件
│ ├── en.yaml 
│ └── zh-cn.yaml
├── 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 动态更改主题色
│ │ └── locale.ts         # vue-i18n 更改语言
│ ├── plugins/            # plugins 目录
│ │ └── i18n.ts           # vue-i18n 插件配置
├── .env                  # vite-plugin-env-helper 添加的环境变量配置文件
├── eslint.config.ts      # vite-plugin-env-helper 更改后的配置文件
├── vite.config.ts        # 修改后的 vite 配置
└── package.json          # 修改后的依赖