Vue.js应用部署二级域名全指南：Nginx配置、CSR优化与跨域治理

【导读】
Vue.js单页应用绑定二级域名常引发静态资源路径错误、history模式404及搜索引擎收录异常。本文基于生产环境验证给出标准化配置流程。
二级域名部署为何成为企业前端架构刚需
随着SaaS化系统拆分加速，营销站（market.example.com）、后台管理（admin.example.com）、开放平台（api.example.com）普遍采用独立二级域名承载不同Vue实例。
据新网客户服务数据显示，近一年咨询量中37%源于二级域名下public目录引用失效或router.push跳转白屏问题。
在此处添加配图
Nginx关键配置三要素
root指令必须指向dist根目录而非子路径，例如 root /var/www/market;
location / { try_files $uri $uri/ /index.html; } 支持HTML5 history模式回退
add_header X-Frame-Options "DENY" 和 add_header X-Content-Type-Options nosniff 强制启用安全头
Cross-Origin Resource Sharing协同策略
若主站example.com调用market.example.com接口，需后端响应含Access-Control-Allow-Origin: https://example.com；不可设置为通配符*
VUE_APP_API_BASE_URL应定义为绝对URL并随构建环境变量注入
axios拦截器统一追加withCredentials: true支持Cookie透传
非必要不开启CORS预检缓存（Access-Control-Max-Age），降低调试复杂度
CSR场景下的SEO补救措施
纯客户端渲染导致爬虫无法抓取有效内容，推荐组合实施：
使用vue-meta插件动态写入meta title/description
接入新网CDN边缘节点SSR代理层（可选付费增强项）
提交sitemap.xml至搜索平台，明确标注各二级域名归属关系
结语
正确配置二级域名不是单纯修改host文件或DNS记录的行为，而是涵盖编译参数、服务器规则、HTTP协议栈与SEO工程化的完整交付链路。
新网已为超1200家客户提供Vue多站点托管服务，全部实现零配置故障上线。
延伸问答
Q1：能否在同一台Nginx上同时运行www和shop两个Vue项目？
Q2：Vite构建产物是否适用相同二级域名Nginx模板？