Skip to content

Commit 1b1bc06

Browse files
feat: 版本3.0.0发布,支持最新技术栈和新增功能
- 所有包版本已升级至3.0.0,支持Vue3.5和Vite7。 - 新增AI Hub包,支持阿里云、OpenAI等多种AI服务集成。 - 完善Nuxt 4支持,提升服务端渲染能力。 - 优化hooks,新增useDesignTokens、useOriginTableSort、usePriorityValue等。 - 强化http模块,增加智能缓存、重试机制和超时控制。 - 更新多个组件,提升性能和用户体验。
1 parent 2496ace commit 1b1bc06

File tree

9 files changed

+1634
-208
lines changed

9 files changed

+1634
-208
lines changed

docs/project-docs/docs/configs/vite/index.md

Lines changed: 250 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
# vite
1+
# Vite 配置
22

3-
npm 包名称: `@quantum-design/vite`
3+
npm 包名称: `@quantum-design-configs/vite`
44

5-
当前版本: 2.0.4
5+
当前版本: **3.0.0** (基于 Vite 7.1.1)
66

7-
提供了公共的 vite 配置
7+
提供了公共的 vite 配置,支持最新的 Vite 7 特性
88

99
## API
1010

11-
| 方法名 | 方法 | 说明 |
12-
| --------------------------- | ------------------------------------------------------------------ | ---------------------------- |
13-
| vite_common_lib_config | (options: CommonOptions):UserConfig | vue 组件库 lib vite 公共配置 |
14-
| vite_common_vue_config | ({ command, mode }: ConfigEnv, options: CommonOptions): UserConfig | vue 项目, vite 公共配置 |
15-
| vite_plugin_postcss_pxtorem | (rootValue: number): postcss.Plugin | vue 项目, m 版样式适配 |
11+
| 方法名 | 方法 | 说明 |
12+
| ------------------------------ | ------------------------------------------------------------------ | ---------------------------- |
13+
| vite_common_lib_config | (options: CommonOptions):UserConfig | vue 组件库 lib vite 公共配置 |
14+
| vite_common_vue_config | ({ command, mode }: ConfigEnv, options: CommonOptions): UserConfig | vue 项目, vite 公共配置 |
15+
| vite_plugin_postcss_pxtorem | (rootValue: number): postcss.Plugin | vue 项目, 移动端样式适配 |
16+
| **vite_plugin_ai_integration** | (config: AIConfig): Plugin | **AI集成插件配置** |
1617

1718
```js
18-
// type 类型
19+
// v3.0.0 新增类型定义
1920
export interface ViteEnv {
2021
VITE_PORT: number; // 端口
21-
// VITE_USE_MOCK: boolean;
2222
VITE_PROXY: [string, string][];
2323
VITE_GLOB_APP_TITLE: string;
2424
VITE_BASE_PATH: string; // 基本路径
25-
// VITE_USE_CDN: boolean;
2625
VITE_DROP_CONSOLE: boolean; // 是否删除console
2726
VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'; // 压缩
2827
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean; // 压缩时是否删除原文件
@@ -31,7 +30,11 @@ export interface ViteEnv {
3130
VITE_USE_VISUALIZER: boolean; // 资源分析
3231
VITE_GLOB_API_URL: string; // url
3332
VITE_USE_PWA: boolean; // 是否使用pwa
34-
// VITE_GENERATE_UI: string;
33+
// v3.0.0 新增环境变量
34+
VITE_USE_AI: boolean; // 是否启用AI功能
35+
VITE_AI_PROVIDER: 'openai' | 'aliyun' | 'azure'; // AI提供商
36+
VITE_AI_API_KEY: string; // AI API密钥
37+
VITE_NUXT_4_SUPPORT: boolean; // 是否启用Nuxt 4支持
3538
}
3639

3740
export interface CommonOptions {
@@ -46,13 +49,86 @@ export interface CommonOptions {
4649
customPlugins?: any[];
4750
dtsOptions?: PluginOptions;
4851
pluginsOption?: IPluginsCommonOptions // 增加部分, 配置sentry
52+
// v3.0.0 新增配置
53+
aiConfig?: AIConfig; // AI集成配置
54+
nuxt4Support?: boolean; // Nuxt 4支持
4955
}
5056

5157
export interface IPluginsCommonOptions {
5258
sentry?:SentryVitePluginOptions,
5359
pwa?: Partial<VitePWAOptions>
60+
// v3.0.0 新增
61+
ai?: AIConfig;
5462
}
5563

64+
// v3.0.0 新增AI配置接口
65+
export interface AIConfig {
66+
provider: 'openai' | 'aliyun' | 'azure';
67+
apiKey: string;
68+
endpoint?: string;
69+
models?: string[];
70+
enableSSR?: boolean; // 服务端渲染支持
71+
}
72+
73+
```
74+
75+
## v3.0.0 新增功能
76+
77+
### 🤖 AI 集成支持
78+
79+
```js
80+
// AI配置示例
81+
import { defineConfig } from 'vite'
82+
import { vite_common_vue_config, vite_plugin_ai_integration } from '@quantum-design-configs/vite'
83+
84+
export default defineConfig(({ command, mode }) => {
85+
const aiConfig = {
86+
provider: 'aliyun' as const,
87+
apiKey: process.env.VITE_AI_API_KEY,
88+
models: ['qwen-turbo', 'qwen-plus', 'qwen-max'],
89+
enableSSR: true
90+
};
91+
92+
return {
93+
...vite_common_vue_config(
94+
{ command, mode },
95+
{
96+
aiConfig,
97+
pluginsOption: {
98+
ai: aiConfig
99+
}
100+
}
101+
),
102+
plugins: [
103+
vite_plugin_ai_integration(aiConfig)
104+
]
105+
}
106+
});
107+
```
108+
109+
### 🚀 Nuxt 4 支持
110+
111+
```js
112+
// Nuxt 4 配置示例
113+
import { defineConfig } from 'vite';
114+
import { vite_common_vue_config } from '@quantum-design-configs/vite';
115+
116+
export default defineConfig(({ command, mode }) => {
117+
return {
118+
...vite_common_vue_config(
119+
{ command, mode },
120+
{
121+
nuxt4Support: true,
122+
pluginsOption: {
123+
// Nuxt 4 特定配置
124+
experimental: {
125+
asyncContext: true,
126+
},
127+
},
128+
},
129+
),
130+
};
131+
});
56132
```
57133

58134
## 使用案例
@@ -78,9 +154,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
78154
buildOptions: {
79155
cssCodeSplit: true,
80156
minify: true,
157+
// v3.0.0 新增构建优化
158+
reportCompressedSize: true,
159+
chunkSizeWarningLimit: 1000,
81160
},
82161
dtsOptions: {
83162
entryRoot: resolve(__dirname),
163+
// v3.0.0 增强类型生成
164+
skipDiagnostics: false,
165+
logDiagnostics: true,
84166
},
85167
});
86168
return {
@@ -92,6 +174,13 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
92174
},
93175
},
94176
},
177+
// v3.0.0 新增构建优化
178+
build: {
179+
..._common.build,
180+
cssMinify: 'lightningcss', // 使用Lightning CSS
181+
reportCompressedSize: true,
182+
sourcemap: mode === 'development',
183+
}
95184
};
96185
};
97186
```
@@ -111,6 +200,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
111200
sentry: {
112201
authToken: 'xxxx',
113202
},
203+
// v3.0.0 AI配置
204+
ai: {
205+
provider: 'aliyun',
206+
apiKey: process.env.VITE_AI_API_KEY,
207+
enableSSR: true
208+
}
114209
},
115210
},
116211
);
@@ -127,6 +222,18 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
127222
},
128223
},
129224
},
225+
// v3.0.0 性能优化
226+
optimizeDeps: {
227+
include: [
228+
'vue',
229+
'vue-router',
230+
'pinia',
231+
'@vueuse/core', // 如果使用VueUse
232+
],
233+
exclude: [
234+
// 排除不需要预构建的包
235+
]
236+
}
130237
};
131238
};
132239
```
@@ -153,18 +260,36 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
153260
},
154261
},
155262
postcss: {
156-
plugins: [vite_plugin_postcss_pxtorem(75)],
263+
plugins: [
264+
vite_plugin_postcss_pxtorem(75),
265+
// v3.0.0 新增CSS优化插件
266+
require('cssnano')({
267+
preset: ['default', {
268+
discardComments: {
269+
removeAll: true,
270+
},
271+
}]
272+
})
273+
],
157274
},
158275
},
276+
// v3.0.0 移动端优化
277+
build: {
278+
target: 'es2015',
279+
outDir: 'dist',
280+
assetsDir: 'assets',
281+
cssCodeSplit: true,
282+
sourcemap: mode === 'development',
283+
}
159284
};
160285
};
161286
```
162287

163288
## 所拥有插件
164289

165-
#### vite-plugin-compression
290+
#### vite-plugin-compression2
166291

167-
1. 简介: 是否开启代码压缩
292+
1. 简介: 是否开启代码压缩 (v3.0.0 升级到 v2.2.0)
168293
2. 开启方式: `.env`文件中设置`VITE_BUILD_COMPRESS` 为 true
169294
3. 补充属性: `VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE` 是否删除原始文件
170295

@@ -181,14 +306,33 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
181306

182307
1. 简介: 开启 pwa
183308
2. 开启方式: `.env`文件中设置`VITE_USE_PWA`为 true
309+
3. v3.0.0 升级: 支持最新的PWA插件版本
184310

185311
```js
186312
const _common = vite_common_vue_config(
187313
{ command, mode },
188314
{
189315
pluginsOption: {
190316
pwa: {
191-
// ...
317+
// v3.0.0 支持更多PWA配置
318+
registerType: 'autoUpdate',
319+
workbox: {
320+
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
321+
runtimeCaching: [
322+
// AI API缓存配置
323+
{
324+
urlPattern: /^https:\/\/ai-api\.example\.com\/.*/i,
325+
handler: 'CacheFirst',
326+
options: {
327+
cacheName: 'ai-api-cache',
328+
expiration: {
329+
maxEntries: 50,
330+
maxAgeSeconds: 60 * 60, // 1小时
331+
},
332+
},
333+
},
334+
],
335+
},
192336
},
193337
},
194338
},
@@ -200,9 +344,10 @@ const _common = vite_common_vue_config(
200344
1. 简介: 开启 sentry
201345
2. 开启方式: `.env`文件中设置`VITE_USE_SENTRY`为 true 打开流水线环境自动识别
202346
3. 补充属性: `VITE_USE_SOURCEMAP` 是否开启 sourcemap, (开启后需要设置: `VITE_GLOB_APP_PROJECT`, `VITE_APP_RELEASE_VERSION`)
347+
4. v3.0.0 升级: 支持最新Sentry插件版本
203348

204349
```js
205-
// 扩展属性自定义配置方式
350+
// v3.0.0 扩展属性自定义配置方式
206351
const _common = vite_common_vue_config(
207352
{ command, mode },
208353
{
@@ -211,10 +356,97 @@ const _common = vite_common_vue_config(
211356
sourcemaps: {
212357
ignore: ['node_modules'],
213358
assets: ['./dist/assets/*'],
359+
include: ['./dist/**/*'],
360+
ignore: ['node_modules', '*.test.*', '*.spec.*'],
214361
},
215362
authToken: '3a449fc41c1f48a78f59a69db5a4bee41707f7b5fbbd40abb5816a6a73f4d9de',
363+
// v3.0.0 新增配置
364+
telemetry: true,
365+
debug: mode === 'development',
216366
},
217367
},
218368
},
219369
);
220370
```
371+
372+
#### vite-plugin-lightningcss (v3.0.0 新增)
373+
374+
1. 简介: 使用Lightning CSS替代传统CSS处理,提升构建性能
375+
2. 优势: 更快的CSS处理速度,更小的bundle体积
376+
377+
```js
378+
// 在vite.config.ts中启用
379+
import { defineConfig } from 'vite';
380+
import { vite_common_vue_config } from '@quantum-design-configs/vite';
381+
382+
export default defineConfig(({ command, mode }) => {
383+
return {
384+
...vite_common_vue_config({ command, mode }),
385+
css: {
386+
postcss: {
387+
plugins: [
388+
// 替换原有的cssnano
389+
require('lightningcss')({
390+
minify: mode === 'production',
391+
}),
392+
],
393+
},
394+
},
395+
};
396+
});
397+
```
398+
399+
## 构建性能优化 (v3.0.0 新增)
400+
401+
### Bundle 分析
402+
403+
```js
404+
// 在 vite.config.ts 中添加
405+
import { visualizer } from 'rollup-plugin-visualizer';
406+
407+
export default defineConfig(({ command, mode }) => {
408+
const plugins = [];
409+
410+
if (mode === 'analyze') {
411+
plugins.push(
412+
visualizer({
413+
filename: 'dist/stats.html',
414+
open: true,
415+
gzipSize: true,
416+
brotliSize: true,
417+
}),
418+
);
419+
}
420+
421+
return {
422+
...vite_common_vue_config({ command, mode }),
423+
plugins,
424+
};
425+
});
426+
```
427+
428+
### 构建缓存优化
429+
430+
```js
431+
export default defineConfig(({ command, mode }) => {
432+
return {
433+
...vite_common_vue_config({ command, mode }),
434+
// v3.0.0 增强构建缓存
435+
build: {
436+
rollupOptions: {
437+
output: {
438+
manualChunks: {
439+
// 第三方库分离
440+
vue: ['vue', 'vue-router', 'pinia'],
441+
antd: ['ant-design-vue', '@ant-design/icons-vue'],
442+
utils: ['lodash-es', 'dayjs', 'axios'],
443+
},
444+
},
445+
},
446+
// 启用文件缓存
447+
chunkSizeWarningLimit: 1000,
448+
sourcemap: mode === 'development',
449+
},
450+
};
451+
});
452+
```

0 commit comments

Comments
 (0)