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

若依系统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';
        })