springboot + vue项目本地化部署配置内+外网

1、项目使用nginx做访问代理

配置如下：

# 内网访问配置

server {
listen 80;
server_name 192.168.0.235;
   client_max_body_size 100M;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root /home/jack/mes/static/dist;
index index.html index.htm;
}

location /websocket {# 后端websocket服务映射
proxy_set_header Host $host;
proxy_redirect off;
proxy_pass http://192.168.0.235:8081/websocket;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

location /proxyApi/ {
proxy_pass http://192.168.0.235:8081/;
}

location /upload {
alias /home/jack/upload;
autoindex on;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

# 外网访问配置

server {
listen 9001;
server_name 58.210.184.228;
   client_max_body_size 100M;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root /home/jack/mes/static/dist;
index index.html index.htm;
}

location /websocket {# 后端websocket服务映射
proxy_set_header Host $host;
proxy_redirect off;
proxy_pass http://192.168.0.235:8081/websocket;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

location /proxyApi/ {
proxy_pass http://192.168.0.235:8081/;
}

location /upload {
alias /home/jack/upload;
autoindex on;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

2、vue打包npm run build 后的index.html进行IP对口配置

<script>window.SITE_CONFIG{apiURL:window.location.origin+"/proxyApi",socketURL:"ws://"+window.location.host+"/websocket"}

备注：

传参前边的URL：window.location.origin（可用来动态获取接口）
"http://192.168.0.1:10080"

域名 + 端口：window.location.host
"192.168.0.1:10080"

springboot + vue项目本地化部署配置内+外网相关推荐

SpringBoot+Vue项目打包部署
本篇目录: 1. SpringBoot+Vue项目分析: 2. 前后端打包: 3. 部署 1. SpringBoot+Vue项目分析通常来说,如果采用这样的开发模式,该工程通常是前后端分离的项目: ...
部署springboot+vue项目文档（若依ruoyi项目部署步骤）
部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图 ...
一键生成Springboot Vue项目！【私活神器】
今天给大家推荐一款自己公司正在打磨的一款一键部署,一键生成全自动化的低代码生成器工具,可以实现前端可视化操作(拖拽形式+配置就可以生成前端页面),后端直接结合前端代码一键生成,数据库(含表字段)可一键 ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue项目打包部署linux_Vue项目打包部署到Nginx服务器
"随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能:本文将带你学习vue项目部署及遇到的各种坑." 关于vue项目部署不得不提的是配置文件vue.config. ...

springboot + vue项目本地化部署配置内+外网

springboot + vue项目本地化部署配置内+外网相关推荐

最新文章

热门文章