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 带入目录中查找文件