云帆考试系统

部署项目到子目录

通常情况下，我们建议将程序部署到根目录下面，使用二级域名进行系统的访问
如：https://exam.yfhl.netopen in new window
但对于一些方案集成商或者需要共享会话等原因，需要将系统部署在子目录下面访
如：https://www.yfhl.net/examopen in new window
此时需要我们针对前端打包和服务器Nginx进行相应的配置即可实现，本文演示将考试系统部署到exam的二级目录中

前端配置

配置思路，将所有静态资源、路由、包括接口访问全部都增加二级目录/exam/

修改：vue.config.js

publicPath: '/exam/',
outputDir: 'dist',
assetsDir: 'static',
...

修改环境文件：.evn.production

VUE_APP_BASE_API = '/exam'

修改路由：src/router/index.js

mode: 'history',
base: '/exam/',
...

NGINX配置

前端文件我们已经增加了子目录访问，这个是没问题的；但是后台接口实际上是不需要二级目录的
正确接口地址为：http://localhost:8080/api/sys/config/detailopen in new window
现在请求地址为：http://localhost:8080/exam/api/sys/config/detailopen in new window
此时，我们在实际代理的时候，需要将/exam/去除，再转发到后端去处理

# 前端打包好的dist文件
set $dir '/deploy/exam-prod/dist';

# 访问二级目录默认到前端文件 
location /exam/ {
    # 因为已经进入了，所以要去除虚拟目录，也可以把目录命名为exam，然后root指向它的上级
    rewrite ^/exam(/.*)$ $1 break;
    root $dir;
    try_files $uri $uri/ /index.html last;
}

# 后端接口
location ~/exam/(api/|upload/file/|druid/){
    # 因为我们的接口并不需要加/exam/访问，所以要去除虚拟目录
    rewrite ^/exam(/.*)$ $1 break;
    proxy_pass http://localhost:8080;
}

访问考试系统

配置好以后，使用完整的URL进行访问，如：https://www.yfhl.net/exam/loginopen in new window

配置文件上传

以上配置我们将整个系统所有的访问URL都增加了/exam/目录，如果我们使用本地存储的话，在文件访问时也应当遵循此规则，如：

本地目录: /data/files/
访问URL: /exam/

如果您用的是其他云存储，则无需作此配置。