springboot+vue项⽬部署到服务器详细（前后端单独部署）最近在写springboot+vue的项⽬，⽤了前后端分离，写完了之后就该部署了，我认为其中主要是来解决跨域的问题。那么来看看怎么配置的。
以下为window环境，下⽂会说明和linux不同的地⽅，但主要是学习配置，环境不影响。
⼀、前端部署
2、解压安装包到任意⽬录nginx部署前端项目
3、打开前端项⽬，执⾏npm run build
4、进⼊前端项⽬的dist⽬录，把⾥⾯的⽂件都复制到nginx\html 下（注意：需要覆盖掉nginx\html 下的index.html）
5、配置完整项⽬的默认端⼝，打开 nginx\f，到 server 的配置处，然后按照下⾯来更改：
server {
listen      80;
server_name  localhost;
#charset koi8-r;
#access_log  logs/host.access.log  main;
#root存放前端项⽬的⽬录地址，这⾥采⽤默认配置，即nginx/html⽬录
#index配置⾸页⽂件
location / {
root  html;
index  index.html index.htm;
}
#这⾥解决跨域问题，后端地址及端⼝号
location /api/ {
proxy_pass 127.0.0.1:8080$request_uri;
proxy_redirect    off;
proxy_set_header  Host $host;
proxy_set_header  X-real-ip $remote_addr;
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
主要是改三个地⽅，listen配置项⽬的端⼝号， location / 配置前端项⽬的⽬录， location /api/ 配置后端地址解决跨域问题。
这⾥给出⼀个参考，是使⽤⾃定义前端⽂件路径时的配置，注，下图和本⽂章配置不同，仅做为参考，全篇⽂章以代码为准！
⼆、后端部署
这⾥先说下war⽅式部署。
1.进⼊后端项⽬，使⽤maven package打包后端项⽬，得到.war⽂件，不会打包war的待会看下⽂jar⽅式部署
2.把war⽂件放到tomcat/webapps/⽬录下，重命名为api.war，启动tomcat。
这⾥说⼀下，前后端分离项⽬由于是分开写的，前端项⽬发送的所有请求都是后端请求路径加上/api拼接的，⽐如后端有⼀个接⼝：localhost:8080/login，这是正常的访问，地址localhost + 后端端⼝8080 + 接⼝名称/login，那么由于前端端⼝与后端接⼝不同，需配置跨域，跨域后，前端可以访问后端端⼝，这时整个项⽬访问的 login 接⼝就变成了 localhost:8085/api/login ，地址localhost + 前端端⼝8085 + /api + 接⼝名称/login，这时前端就可以访问到后端接⼝，具体跨域配置，这⾥不在详述。
接下来说说jar⽅式部署后端。
1.前⾯所说nginx配置不变，修改后端yml配置⽂件，添加如下：
server:
tomcat:
uri-encoding: UTF-8
port: 8080
servlet:
context-path: /api
session:
timeout: 0
2.后端打包⽣成jar⽂件，打开命令⾏进⼊到jar⽂件所在⽬录下，执⾏ java -jar xxx.jar
两种⽅式，合适的才是最好的！
后记：
后来学习到nginx重写url⼜到⼀种⽅法，在nginx代理时重写/api开头的url，直接处理好数据，更加⽅便了，这样后端⽆论时war⽅式还是jar⽅式都很⽅便了！
下⾯说说⽅法。
前端部署不变。
修改f如下：
server {
listen 81;
server_name localhost;
location / {
root /data/xxxx/html;
index index.html;
}
#拦截/api/请求，因为所有的请求在前端被处理成 '/api+后端接⼝'形式
location /api/ {
#开启重写⽇志记录，这个会记录在error.log⾥⾯，级别为notice
rewrite_log on;
#重写规则，可根据实际情况调整。
rewrite ^/api/(.*)$ /$1 break;
proxy_pass 127.0.0.1:8089;
proxy_redirect    off;
proxy_set_header  Host $host;
proxy_set_header  X-real-ip $remote_addr;
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
主要是对请求进⾏重写，使⽤了rewrite，⽤法为 rewrite reg replacement flag。（reg：正则表达式，replacement：要替换的⽂本，flag：替换之后的操作），具体使⽤不在详述，这⾥使⽤只需变动第⼀个参数，即正则表达式，根据实际情况修改正则表达式即可，/api/即前端所加请求的前缀。
这样⼀来，后端war部署时就不必在修改war包为api.war了，jar包部署时，也不必在额外添加server:servlet:context-path: /api了。搞定！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。