vue + nginx 反向代理配置

场景:
门户 地址单点登录跳转到项目地址
门户地址:http://192.168.1.70
门户地址加图标链接: http://192.168.1.70/test
项目地址:http://192.168.1.65/

门户服务器nginx增加反向代理 test指向 项目地址

server {
        listen       80 ;
        server_name  localhost; 
        #charset koi8-r; 
        #access_log  logs/host.access.log  main;  
        index index.html;
        root  dist; 
		location /test {
		           #root   html;
		           #index  index.html index.htm;
		           proxy_set_header Host $host;
		           proxy_set_header X-Real-Ip $remote_addr;
		           proxy_set_header X-Forwarded-For $remote_addr;
				       client_max_body_size 220m;
		           proxy_pass http://192.168.1.65:3000;
		        }
		        #让js,css通过 http://192.168.1.70/1.js ..
		        #http://192.168.1.70/1.js门户服务无1.js文件
		        #反向代理到项目服务器http://192.168.1.65:3000
				location ~ .*\.(js|css|jpg|jpeg|gif|png|ico)$ {
		             proxy_pass http://192.168.1.65:3000;
				 }

vue项目程序修改
1、后台访问localhost地址修改为IP,让网络环境能找到
VUE_APP_API_BASE_URL=http://192.168.1.65:9090/jeecg-boot
2、vue.config.js修改
publicPath: ‘/’,

2、route/index.js
base修改:指向代理uri :test

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config' 
Vue.use(Router)  
export default new Router({
  mode: 'history',
  base: 'test'+'/'+process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

2、登录成功路由修改,让能访问到反向代理 URI:test,再跳转到项目地址
views/user/Login.vue

 //登录成功
      loginSuccess () {
      //原代码
       //this.$router.push({ path: "/dashboard/analysis" })
        this.$router.push({ path: "/test/dashboard/analysis" }).catch(()=>{
          console.log('登录跳转首页出错,这个错误从哪里来的')
        })
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()},欢迎回来`,
        });
      },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值