@fchc8/vite-plugin-multi-page 1.1.0 → 1.1.1
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/README.md +3 -164
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -282,69 +282,11 @@ interface PageConfig {
|
|
|
282
282
|
}
|
|
283
283
|
```
|
|
284
284
|
|
|
285
|
-
##
|
|
286
|
-
|
|
287
|
-
### 1. 企业级多页应用
|
|
288
|
-
|
|
289
|
-
```typescript
|
|
290
|
-
buildStrategies: {
|
|
291
|
-
admin: {
|
|
292
|
-
viteConfig: {
|
|
293
|
-
define: { 'process.env.APP_TYPE': '"admin"' }
|
|
294
|
-
},
|
|
295
|
-
build: {
|
|
296
|
-
target: 'es2015',
|
|
297
|
-
sourcemap: true
|
|
298
|
-
}
|
|
299
|
-
},
|
|
300
|
-
|
|
301
|
-
public: {
|
|
302
|
-
viteConfig: {
|
|
303
|
-
define: { 'process.env.APP_TYPE': '"public"' }
|
|
304
|
-
},
|
|
305
|
-
build: {
|
|
306
|
-
target: 'es5',
|
|
307
|
-
minify: 'terser'
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
### 2. 移动端优化
|
|
314
|
-
|
|
315
|
-
```typescript
|
|
316
|
-
buildStrategies: {
|
|
317
|
-
mobile: {
|
|
318
|
-
viteConfig: {
|
|
319
|
-
css: { devSourcemap: true },
|
|
320
|
-
optimizeDeps: { include: ['@mobile/utils'] }
|
|
321
|
-
},
|
|
322
|
-
build: {
|
|
323
|
-
target: 'es2018',
|
|
324
|
-
chunkSizeWarningLimit: 300,
|
|
325
|
-
cssCodeSplit: true
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
```
|
|
285
|
+
## ⚡ 开发与构建一致性
|
|
330
286
|
|
|
331
|
-
###
|
|
287
|
+
### 配置同步机制
|
|
332
288
|
|
|
333
|
-
|
|
334
|
-
buildStrategies: {
|
|
335
|
-
library: {
|
|
336
|
-
build: {
|
|
337
|
-
lib: {
|
|
338
|
-
entry: 'src/index.ts',
|
|
339
|
-
name: 'MyLibrary',
|
|
340
|
-
formats: ['es', 'umd']
|
|
341
|
-
},
|
|
342
|
-
minify: false,
|
|
343
|
-
sourcemap: true
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
```
|
|
289
|
+
本插件确保开发模式与构建模式使用**完全相同的配置逻辑**,避免开发环境和生产环境的差异问题。
|
|
348
290
|
|
|
349
291
|
## 📱 示例项目
|
|
350
292
|
|
|
@@ -371,14 +313,6 @@ npm install # 安装示例依赖
|
|
|
371
313
|
npm run dev # 运行开发服务器
|
|
372
314
|
```
|
|
373
315
|
|
|
374
|
-
### 示例页面
|
|
375
|
-
|
|
376
|
-
构建后访问以下页面:
|
|
377
|
-
|
|
378
|
-
- `/home.html` - 首页(默认策略)
|
|
379
|
-
- `/about.html` - 关于页面(默认策略)
|
|
380
|
-
- `/mobile.html` - 移动端页面(移动端模板)
|
|
381
|
-
|
|
382
316
|
## 🔧 开发
|
|
383
317
|
|
|
384
318
|
```bash
|
|
@@ -421,98 +355,3 @@ MIT License
|
|
|
421
355
|
- [Prettier](https://prettier.io/)
|
|
422
356
|
- [Git Flow](https://nvie.com/posts/a-successful-git-branching-model/)
|
|
423
357
|
- [语义化版本](https://semver.org/lang/zh-CN/)
|
|
424
|
-
|
|
425
|
-
## ⚡ 开发与构建一致性
|
|
426
|
-
|
|
427
|
-
### 配置同步机制
|
|
428
|
-
|
|
429
|
-
本插件确保开发模式与构建模式使用**完全相同的配置逻辑**,避免开发环境和生产环境的差异问题。
|
|
430
|
-
|
|
431
|
-
#### 1. 页面配置一致性
|
|
432
|
-
|
|
433
|
-
```typescript
|
|
434
|
-
// 开发和构建都使用相同的页面配置逻辑
|
|
435
|
-
pageConfigs: context => {
|
|
436
|
-
const { pageName, relativePath } = context;
|
|
437
|
-
|
|
438
|
-
// 移动端页面 - 开发和构建都使用 mobile.html 模板
|
|
439
|
-
if (relativePath.includes('/mobile/')) {
|
|
440
|
-
return {
|
|
441
|
-
template: 'mobile.html',
|
|
442
|
-
define: {
|
|
443
|
-
'process.env.API_BASE': '"https://mobile-api.com"',
|
|
444
|
-
},
|
|
445
|
-
};
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
return { template: 'index.html' };
|
|
449
|
-
};
|
|
450
|
-
```
|
|
451
|
-
|
|
452
|
-
#### 2. 环境变量同步
|
|
453
|
-
|
|
454
|
-
**构建时**:注入到 Vite 配置
|
|
455
|
-
|
|
456
|
-
```typescript
|
|
457
|
-
// 环境变量会被 Vite 编译时替换
|
|
458
|
-
config.define = { 'process.env.API_BASE': '"https://api.com"' };
|
|
459
|
-
```
|
|
460
|
-
|
|
461
|
-
**开发时**:动态注入到 HTML
|
|
462
|
-
|
|
463
|
-
```html
|
|
464
|
-
<!-- 开发服务器自动注入到页面 -->
|
|
465
|
-
<script>
|
|
466
|
-
// 页面级环境变量
|
|
467
|
-
window['process.env.API_BASE'] = 'https://api.com';
|
|
468
|
-
</script>
|
|
469
|
-
```
|
|
470
|
-
|
|
471
|
-
#### 3. 模板选择一致性
|
|
472
|
-
|
|
473
|
-
```typescript
|
|
474
|
-
// 开发模式
|
|
475
|
-
if (pageConfig?.template) {
|
|
476
|
-
const templatePath = path.resolve(pageConfig.template);
|
|
477
|
-
// 使用指定模板
|
|
478
|
-
}
|
|
479
|
-
|
|
480
|
-
// 构建模式
|
|
481
|
-
const templateFile = pageConfig?.template || options.template;
|
|
482
|
-
// 使用相同的模板选择逻辑
|
|
483
|
-
```
|
|
484
|
-
|
|
485
|
-
#### 4. 构建策略应用
|
|
486
|
-
|
|
487
|
-
```typescript
|
|
488
|
-
// 开发模式:应用策略到开发配置
|
|
489
|
-
if (strategy.viteConfig) {
|
|
490
|
-
config.css = { ...config.css, ...strategy.viteConfig.css };
|
|
491
|
-
config.define = { ...config.define, ...strategy.define };
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
// 构建模式:应用策略到构建配置
|
|
495
|
-
if (strategy.viteConfig) {
|
|
496
|
-
applyBuildStrategy(config, strategy);
|
|
497
|
-
}
|
|
498
|
-
```
|
|
499
|
-
|
|
500
|
-
### 验证一致性
|
|
501
|
-
|
|
502
|
-
运行示例项目验证配置一致性:
|
|
503
|
-
|
|
504
|
-
```bash
|
|
505
|
-
# 开发模式
|
|
506
|
-
cd example
|
|
507
|
-
npm run dev
|
|
508
|
-
# 访问 http://localhost:5173/mobile.html
|
|
509
|
-
|
|
510
|
-
# 构建模式
|
|
511
|
-
npm run build
|
|
512
|
-
npm run preview
|
|
513
|
-
# 访问 http://localhost:4173/mobile.html
|
|
514
|
-
|
|
515
|
-
# 对比两种模式下的页面表现应该完全一致
|
|
516
|
-
```
|
|
517
|
-
|
|
518
|
-
## 🌟 使用场景
|
package/package.json
CHANGED