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 新增类型定义
1920export 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
3740export 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
5157export 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)
1682932 . 开启方式: ` .env ` 文件中设置` VITE_BUILD_COMPRESS ` 为 true
1692943 . 补充属性: ` VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE ` 是否删除原始文件
170295
@@ -181,14 +306,33 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
181306
1823071 . 简介: 开启 pwa
1833082 . 开启方式: ` .env ` 文件中设置` VITE_USE_PWA ` 为 true
309+ 3 . v3.0.0 升级: 支持最新的PWA插件版本
184310
185311``` js
186312const _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(
2003441 . 简介: 开启 sentry
2013452 . 开启方式: ` .env ` 文件中设置` VITE_USE_SENTRY ` 为 true 打开流水线环境自动识别
2023463 . 补充属性: ` 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 扩展属性自定义配置方式
206351const _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