vue 路由分發式微前端專案部署
阿新 • • 發佈:2021-07-07
例: 主專案地址為: http://xxx.com, 想配置 xxx.com/newproject 為另一個專案
1. 修改 vue.config.js 中的publicPath (publicPath: '/newproject') // 新專案的靜態資源打包路徑, 如訪問 xxx.com/newproject 檢視 network 所有靜態資源路徑前沒有 /newproject 可能這裡忘記配置
2. 修改 vue-router 中的 base (base: '/newproject') // 專案路由匹配的字首
3. 修改 newproject 專案的 nginx 配置 (使用 nginx 的 docker)
location /newproject {
alias /var/www/;
index index.html index.htm;
try_files $uri $uri/ /newproject/index.html; # (重要)
}
4. 修改 nginx 主入口配置 (負載均衡相關, 可選)
upstream newproject {
server xx.xx.xx.xx weight=1; # (xx.xx.xx.xx 為 newproject 的地址)
}
location /newproject {
proxy_pass http://newproject;
#proxy 相關配置;
}
轉載隨筆/文章請保留出處和署名,謝謝!!