若依系统Vue框架前端部署bug总结

前端都采用 Nginx部署,后端采用jar部署使用nginx实现反向代理,前端打包部署后出现很多问题。

  1. nginx配置
server {
    listen 8080;  # 监听的端口
    server_name localhost;  # 替换为你的域名或 IP 地址
    # 配置前端静态资源
    location /flow{
        alias /usr/flow/front/dist;  # 静态资源路径
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }

    # 反向代理后端 API
    location /flow-admin/ {
        proxy_pass http://localhost:8121/;  # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

2. 前端打包命令

npm run build:prod

3. 前端修改

  • vue.config.js文件:
    在这里插入图片描述
    在这里插入图片描述
  • permision.js文件
    在这里插入图片描述
  • router文件
    在这里插入图片描述
    因为修改了后端访问url因此还需要修改env.production文件中的VUE_APP_BASE_API(使用默认prod-api忽略此步)
# 系统/生产环境
VUE_APP_BASE_API = '/flow-admin'

同时修改退出登录方法,让页面回退到flow

this.$store.dispatch('LogOut').then(() => {
          // 本地
          location.href = '/index';
          // 部署
          // location.href = '/flow';
        })
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐