Vue:子路徑單頁面應用的部署

如果一個應用需要被部署在一個子路徑上, 如 www.xxx.com/app ,則需要對前后端以及nginx等做一些配置.

后端: 

以springboot應用為例, 如果jar包部署, 則不需要設置context-path, 直接部署啟動, 如果端口為 8080, 則nginx參考配置可以為:

server {
        listen        80;
        server_name  www.xxx.com;
        location /app/prod-api/ {
            proxy_pass http://127.0.0.1:8080/;
        }
}

PS: '/app/prod-api/' 最后的 '/' 不能少, 否則在請求轉發之后可能會出現url里面 雙斜杠 (//) 的情況, 可能會導致java web服務器如(tomcat) 報錯,      'proxy_pass http://127.0.0.1:8080/' 最后的 '/' 也不能少, 這樣配置nginx會在轉發之后把匹配的整個路徑丟棄.

war包部署則可以放在tomcat容器里, 與上面不同的是只需要在 proxy_pass 的轉發url后面加上tomcat部署的文件夾名稱即可.

前端:

以基於Vue的前后端分離版ruoyi框架為例, 需要配置三個方面:

1. css,js等資源文件的路徑:   可以默認以當前路徑為基礎的相對路徑, 如在vue.config.js文件中配置 publicPath: process.env.NODE_ENV === "production" ? "" : "/"  這樣如果當前環境為production的話, 則打包出來的index.html中引用的資源文件路徑是相對路徑

如當前url為 www.xxx.com/app 則資源文件請求會以這個url為基礎url.

2. vue router的基礎路徑: 依然可以參考css,js等的配置, 在 new Router中加入base參數 如下面代碼所示:

export default new Router({
  mode: 'history', // 去掉url中的#
  base: process.env.NODE_ENV === "production" ? "/app" : "/",
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3. 后端接口的url路徑: 在.env.production文件中配置 VUE_APP_BASE_API = '/app/prod-api'  其原理為在所有后端api的url前面加上前綴, 讓它可以匹配到上面nginx配置中的后端路徑

后端+前端nginx示例配置文件:

server {
        listen        80;
        server_name  www.xxx.com;
        location /app/prod-api/ {
            proxy_pass http://127.0.0.1:8080/;
        }
        location /app {
            alias D:/application/web/app;
            try_files $uri $uri/ /index.html?$query_string;
            index index.html;
        }
}

與正常配置不同的是不能使用root指定文件目錄, 需要使用alias, 因為不能把url中的 /app 帶入目錄中查找文件