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/prod-api/;
        }
}

PS: '/app/prod-api/' 最后的 '/' 不能少, 否则在请求转发之后可能会出现url里面 双斜杠 (//) 的情况, 可能会导致java web服务器如(tomcat) 报错,      'proxy_pass http://127.0.0.1:8080/' 最后的 '/' 也不能少, 这样配置nginx会在转发之后把匹配的整个路径丢弃.

war包部署则可以放在tomcat容器里, 与上面不同的是只需要在 proxy_pass 的转发url后面加上tomcat部署的文件夹名称即可.

前端(VUE):

以基于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配置中的后端路径

前端(REACT):

1. 配置路由base

    <BrowserRouter basename='/sc-h5'>
      <Router></Router>
    </BrowserRouter>

2. 配置打包部署地址

  "homepage": "/sc-h5",

在 package.json 文件中，homepage 属性表示应用的主页地址。这个属性可以用来告诉用户如何在生产环境访问应用。

如果你使用 create-react-app 或者其他脚手架工具来创建一个 React 项目，那么你可能会在 package.json 文件中看到 homepage 属性被设置为 "./"。这意味着应用在本地运行时，它的主页地址是 "http://localhost:3000"。

当你执行 "npm run build" 命令时，create-react-app 会将打包后的文件部署到项目根目录下的build文件夹中，这时候你可以使用homepage 来配置应用的部署地址。

例如，如果你将应用部署到 "https://example.com/myapp"，那么你应该在 package.json 文件中将 homepage 属性设置为 "https://example.com/myapp"。

后端+前端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/ /app/index.html?$query_string;
            index index.html;
        }
}

与正常配置不同的是不能使用root指定文件目录, 需要使用alias, 因为不能把url中的 /app 带入目录中查找文件

 

后记

关于try_files的问题, try_files找的是root目录中的文件, 所以nginx配置可以这么配置

        location /sc-admin {
            root /data/cy/sc/html;
            try_files $uri $uri/ /sc-admin/index.html;
            index index.html;
            autoindex  off;
        }
        
        location /sc-h5 {
            root /data/cy/sc/html;
            try_files $uri $uri/ /sc-h5/index.html;
            index index.html;
            autoindex  off;
        }

如果想搭配alias使用, 则可以这么配置

        location /sc-admin {
            alias /data/cy/sc/html/sc-admin/;
            try_files $uri $uri/ /sc-admin/index.html;
            index index.html;
            autoindex  off;
        }
        
        location /sc-h5 {
            alias /data/cy/sc/html/sc-h5/;
            try_files $uri $uri/ /sc-h5/index.html;
            index index.html;
            autoindex  off;
        }