1. 程式人生 > 其它 >vue 路由分發式微前端專案部署

vue 路由分發式微前端專案部署

例: 主專案地址為: 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 相關配置;

}

轉載隨筆/文章請保留出處和署名,謝謝!!