上图是我自己拍脑袋瞎想的. 静态文件从 80 端口下载. 端口 80 也是 web 端入口. 然后 ajax 从 8000 端口获取数据. 至于前端如何从 8000 端口获取数据, 是通过环境变量在用 webpack 打包的时候将 url 前缀加进去, 变成绝对地址. 1. 假设是内网环境,没有 DNS/CDN 这些. 1.5 假设没有移动端 /小程序. 就是一个网页, 一个后端. 2. 跨域如何处理? 前端处理还是后端处理? 3. 实际情况是走红线还是绿线还是都不是? 谢谢大佬们. 端口, webpack, 处理, ajax
两种方式 1.代码加上域名前缀，webpack 加还是写死都可以，然后后端设置 cors 允 2. 服务器做反代，这也是目前主流方案，可以参考我这个 https://github.com/yanzhangshuai/spa-vue-template/blob/vite-3.X/deploy/nginx.conf
将 API 和静态资源放置到一个服务器上，然后走反向代理，用不同的域名: api.example.com 处理动态 API, example.com 走静态资源，api.example.com 内部可以有网关，然后代理后面的微服务，或者将这个代理移动到对外的反向代理也行。
跨域后端加个 header 就行了。 上规模的项目通常是前端走 CDN ，顶多有一个隐藏服务器专门用来让 CDN 首次取文件；后端就是走 WAF 、负载均衡。网站域名配置给 CDN ，API 域名配置给 WAF ，然后均衡（一般是基于 Nginx 改的）加个跨域头，允许前端域名。 环境分开发环境、测试环境、正式环境等，可以准备三套配置文件，用环境变量让打包工具选择特定的配置信息注入到代码里。
