vite-plugin-config-helper 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +84 -84
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025-PRESENT TopFiveGao <https://github.com/topfivegao>
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-PRESENT TopFiveGao <https://github.com/topfivegao>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
# vite-plugin-config-helper
|
|
2
|
-
|
|
3
|
-
一个用于更改默认 vite.config.ts 文件，将配置逻辑分离到 build 目录文件的插件。
|
|
4
|
-
|
|
5
|
-
如果项目存在 build 目录，且包含 index.ts 或者 plugins.ts 文件， 则插件将不会更改 vite.config.ts 文件。
|
|
6
|
-
|
|
7
|
-
可以利用这个插件来整合之前写的 <span style="color: darkcyan;">vite-plugin-env-helper</span> 和 <span style="color: darkcyan;">vite-plugin-scan-routes</span> 插件，还可以拓展其他配置，例如 element-plus 组件，来快速搭建项目框架。
|
|
8
|
-
|
|
9
|
-
该插件只在项目初始搭建时起作用，搭建完成后会自动删除自身，所以不需要关注本库的大小及优化！
|
|
10
|
-
|
|
11
|
-
运行逻辑：
|
|
12
|
-
|
|
13
|
-
首先会判断在项目根目录下是否存在 /build/config/index.ts 或 /build/config/plugin.ts 文件，不存在则继续执行，
|
|
14
|
-
|
|
15
|
-
然后判断是否存在 .env 文件，并在该文件中以 VITE_APP_BASE_URL VITE_APP_PROXY_URL VITE_APP_PORT 这三个键承接插件传入参数 baseUrl proxyUrl port 。
|
|
16
|
-
|
|
17
|
-
在这个插件的开发过程中，不断添加的参数增加了复杂度，先是整合自己的两个插件，然后又想加 element-plus tailwindcss 等，边界的扩大导致了使用的复杂，最后决定整合 element-plus 然后稳定下来，这就已经可以实现比较全面的基础模板了。
|
|
18
|
-
## 安装
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm i -D vite-plugin-config-helper
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## 使用
|
|
25
|
-
|
|
26
|
-
### 配置 <span style="color: darkcyan;">__vite.config.ts__</span>
|
|
27
|
-
|
|
28
|
-
1. 利用vue 或 vite 官方脚手架创建 vue 项目后，在 vite.config.ts 添加以下内容，然后执行命令 vite 。
|
|
29
|
-
|
|
30
|
-
2. 检查 package.json 文件，重新安装依赖。
|
|
31
|
-
|
|
32
|
-
3. 经过上面的操作，本插件会帮我们改造 vite.config.ts 配置文件，并将一些插件配置（element-plus）拆分到 /build/config 目录中，不用每次都去官网复制粘贴，能快速初始化一个干净的项目。
|
|
33
|
-
```ts
|
|
34
|
-
import vue from '@vitejs/plugin-vue'
|
|
35
|
-
import { defineConfig, type UserConfig, type ConfigEnv } from 'vite'
|
|
36
|
-
import {configHelper} from 'vite-plugin-config-helper'
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
export default defineConfig((config: ConfigEnv): UserConfig => {
|
|
40
|
-
|
|
41
|
-
return {
|
|
42
|
-
plugins: [
|
|
43
|
-
vue(),
|
|
44
|
-
// 路由插件是自用的，感兴趣可自行查询，实现了 unplugin-vue-router 部分功能：约定式路由。
|
|
45
|
-
// element-plus 最好是 2.10.5 以上版本
|
|
46
|
-
// configHelper() // 默认值如下
|
|
47
|
-
configHelper({
|
|
48
|
-
port: 5173,
|
|
49
|
-
baseUrl: '/api',
|
|
50
|
-
proxyUrl: 'http://192.168.0.193:9999' ,
|
|
51
|
-
pluginEnvHelper: true,
|
|
52
|
-
pluginScanRoutes: false,
|
|
53
|
-
pluginElementPlus: true
|
|
54
|
-
})
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### 说明
|
|
62
|
-
插件运行后会更改已有的一些文件并添加一些文件，变动如下：
|
|
63
|
-
```md
|
|
64
|
-
├── build/
|
|
65
|
-
│ ├── config/ # 插件配置目录
|
|
66
|
-
│ │ ├── index.ts # 主配置文件
|
|
67
|
-
│ │ ├── plugins.ts # vite 默认配置文件
|
|
68
|
-
│ │ └── ep.ts # ElementPlus 配置文件，包括组件和样式自动导入等
|
|
69
|
-
├── src/
|
|
70
|
-
│ ├── components/ # 组件目录
|
|
71
|
-
│ │ └── FormBuilder.vue # 自用组件
|
|
72
|
-
│ ├── types/ # ts类型文件目录
|
|
73
|
-
│ │ ├── auto-imports.d.ts # unplugin-auto-import 配置生成
|
|
74
|
-
│ │ ├── components.d.ts # unplugin-vue-components 配置生成
|
|
75
|
-
│ │ └── ep.d.ts # ElementPlus 配置文件，包括组件和样式自动导入等
|
|
76
|
-
│ ├── hooks/ # hook 目录
|
|
77
|
-
│ │ └── color.ts # ElementPlus 动态更改主题色
|
|
78
|
-
├── .env # vite-plugin-env-helper 添加的环境变量配置文件
|
|
79
|
-
├── eslint.config.ts # vite-plugin-env-helper 更改后的配置文件
|
|
80
|
-
├── vite.config.ts # 修改后的 vite 配置
|
|
81
|
-
└── package.json # 修改后的依赖
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
本插件默认会将依赖的 unplugin-auto-import unplugin-vue-components unplugin-element-plus element-plus 库的最新版本写入 package.json 文件中， 因此这些依赖更新时，插件也应该更新。更新版本时插件源码位置为 500 和 509 行。
|
|
1
|
+
# vite-plugin-config-helper
|
|
2
|
+
|
|
3
|
+
一个用于更改默认 vite.config.ts 文件，将配置逻辑分离到 build 目录文件的插件。
|
|
4
|
+
|
|
5
|
+
如果项目存在 build 目录，且包含 index.ts 或者 plugins.ts 文件， 则插件将不会更改 vite.config.ts 文件。
|
|
6
|
+
|
|
7
|
+
可以利用这个插件来整合之前写的 <span style="color: darkcyan;">vite-plugin-env-helper</span> 和 <span style="color: darkcyan;">vite-plugin-scan-routes</span> 插件，还可以拓展其他配置，例如 element-plus 组件，来快速搭建项目框架。
|
|
8
|
+
|
|
9
|
+
该插件只在项目初始搭建时起作用，搭建完成后会自动删除自身，所以不需要关注本库的大小及优化！
|
|
10
|
+
|
|
11
|
+
运行逻辑：
|
|
12
|
+
|
|
13
|
+
首先会判断在项目根目录下是否存在 /build/config/index.ts 或 /build/config/plugin.ts 文件，不存在则继续执行，
|
|
14
|
+
|
|
15
|
+
然后判断是否存在 .env 文件，并在该文件中以 VITE_APP_BASE_URL VITE_APP_PROXY_URL VITE_APP_PORT 这三个键承接插件传入参数 baseUrl proxyUrl port 。
|
|
16
|
+
|
|
17
|
+
在这个插件的开发过程中，不断添加的参数增加了复杂度，先是整合自己的两个插件，然后又想加 element-plus tailwindcss 等，边界的扩大导致了使用的复杂，最后决定整合 element-plus 然后稳定下来，这就已经可以实现比较全面的基础模板了。
|
|
18
|
+
## 安装
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm i -D vite-plugin-config-helper
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 使用
|
|
25
|
+
|
|
26
|
+
### 配置 <span style="color: darkcyan;">__vite.config.ts__</span>
|
|
27
|
+
|
|
28
|
+
1. 利用vue 或 vite 官方脚手架创建 vue 项目后，在 vite.config.ts 添加以下内容，然后执行命令 vite 。
|
|
29
|
+
|
|
30
|
+
2. 检查 package.json 文件，重新安装依赖。
|
|
31
|
+
|
|
32
|
+
3. 经过上面的操作，本插件会帮我们改造 vite.config.ts 配置文件，并将一些插件配置（element-plus）拆分到 /build/config 目录中，不用每次都去官网复制粘贴，能快速初始化一个干净的项目。
|
|
33
|
+
```ts
|
|
34
|
+
import vue from '@vitejs/plugin-vue'
|
|
35
|
+
import { defineConfig, type UserConfig, type ConfigEnv } from 'vite'
|
|
36
|
+
import {configHelper} from 'vite-plugin-config-helper'
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
export default defineConfig((config: ConfigEnv): UserConfig => {
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
plugins: [
|
|
43
|
+
vue(),
|
|
44
|
+
// 路由插件是自用的，感兴趣可自行查询，实现了 unplugin-vue-router 部分功能：约定式路由。
|
|
45
|
+
// element-plus 最好是 2.10.5 以上版本
|
|
46
|
+
// configHelper() // 默认值如下
|
|
47
|
+
configHelper({
|
|
48
|
+
port: 5173,
|
|
49
|
+
baseUrl: '/api',
|
|
50
|
+
proxyUrl: 'http://192.168.0.193:9999' ,
|
|
51
|
+
pluginEnvHelper: true,
|
|
52
|
+
pluginScanRoutes: false,
|
|
53
|
+
pluginElementPlus: true
|
|
54
|
+
})
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 说明
|
|
62
|
+
插件运行后会更改已有的一些文件并添加一些文件，变动如下：
|
|
63
|
+
```md
|
|
64
|
+
├── build/
|
|
65
|
+
│ ├── config/ # 插件配置目录
|
|
66
|
+
│ │ ├── index.ts # 主配置文件
|
|
67
|
+
│ │ ├── plugins.ts # vite 默认配置文件
|
|
68
|
+
│ │ └── ep.ts # ElementPlus 配置文件，包括组件和样式自动导入等
|
|
69
|
+
├── src/
|
|
70
|
+
│ ├── components/ # 组件目录
|
|
71
|
+
│ │ └── FormBuilder.vue # 自用组件
|
|
72
|
+
│ ├── types/ # ts类型文件目录
|
|
73
|
+
│ │ ├── auto-imports.d.ts # unplugin-auto-import 配置生成
|
|
74
|
+
│ │ ├── components.d.ts # unplugin-vue-components 配置生成
|
|
75
|
+
│ │ └── ep.d.ts # ElementPlus 配置文件，包括组件和样式自动导入等
|
|
76
|
+
│ ├── hooks/ # hook 目录
|
|
77
|
+
│ │ └── color.ts # ElementPlus 动态更改主题色
|
|
78
|
+
├── .env # vite-plugin-env-helper 添加的环境变量配置文件
|
|
79
|
+
├── eslint.config.ts # vite-plugin-env-helper 更改后的配置文件
|
|
80
|
+
├── vite.config.ts # 修改后的 vite 配置
|
|
81
|
+
└── package.json # 修改后的依赖
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
本插件默认会将依赖的 unplugin-auto-import unplugin-vue-components unplugin-element-plus element-plus 库的最新版本写入 package.json 文件中， 因此这些依赖更新时，插件也应该更新。更新版本时插件源码位置为 500 和 509 行。
|