【導讀】
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模板？