开发服务器高级配置专题
专题说明
本专题深入介绍 Vite 开发服务器的高级配置选项，帮助开发者解决开发环境中的网络与调试问题。
学习目标
- 掌握反向代理配置解决 API 跨域问题
- 理解 CORS 跨域处理机制
- 学会 HMR 高级配置与文件监听设置
学习内容
- 反向代理配置：server.proxy 配置
- CORS 跨域处理：跨域请求处理策略
- HMR 高级配置：热更新行为定制
- 文件监听与忽略：watch 配置
学习建议
实际配置反向代理解决本地开发 API 调用问题，体验 HMR 高级配置效果。
📝 配套习题（17 题）
💡 参考答案在文末
判断题
1
server.hmr 配置可以自定义 Vite 热模块替换的连接方式和行为。
2
server.proxy 配置可以将开发环境 API 请求代理到后端服务器，解决跨域问题。
3
server.proxy 配置可以解决开发环境 API 跨域问题。
4
server.watch 配置可以控制 Vite 开发服务器监听的文件范围，优化性能。
5
server.cors 配置可以控制 Vite 开发服务器对跨域请求的响应策略。
单选题
6
配置 server.hmr: { overlay: false } 的作用是什么？
7
配置 server.proxy: { '/api': 'http://localhost:3000' } 后，请求 /api/users 会被代理到哪里？
8
设置 server.cors: { origin: 'http://example.com' } 的效果是什么？
9
配置 server.watch: { ignored: ['**/dist/**'] } 的作用是什么？
多选题
10
server.cors 配置对象可以设置哪些 CORS 选项？
11
开发环境跨域问题的解决方案有哪些？
12
server.hmr 配置项可以设置哪些选项？
13
以下哪些场景需要自定义 server.hmr 配置？
14
以下哪些是 Vite 开发服务器反向代理的典型应用场景？
15
以下哪些目录通常建议在 server.watch.ignored 中排除？
16
server.watch 配置支持哪些 chokidar 选项？
17
server.proxy 配置项支持哪些功能？
参考答案
1.正确
2.正确
3.正确
4.正确
5.正确
6.B
7.A
8.B
9.A
10.A;B;C;D
11.A;B;C
12.A;B;C;D
13.A;B;C;D
14.A;B;C
15.A;B;C
16.A;B;C;D
17.A;B;C;D
想在手机上练习这套专题？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
