| 云帆考试系统 - 北京云帆互联网科技有限公司

部署项目到子目录

通常情况下,我们建议将程序部署到根目录下面,使用二级域名进行系统的访问
如:https://exam.yfhl.netopen in new window
但对于一些方案集成商或者需要共享会话等原因,需要将系统部署在子目录下面访
如://www.suwotou.com/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进行访问,如://www.suwotou.com/exam/loginopen in new window

配置文件上传

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

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

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

Baidu
map