springboot + vue 前后端分离部署_spring boot+vue 前后端分离项目搭建

以下为window环境为例

一、前端部署

1、下载 nginx，官网：http://nginx.org/en/download.html 
2、解压安装包到任意目录 ，并在nginx目录下新建个目录，以存放vue前端工程目录，如图

3、打开前端项目(package.json所在的目录)，cmd 黑窗口执行npm run build 编译后产生dist目录

4、将dist目录整个复制到第一个图中nginx\vue下
5、配置nginx，打开 nginx\conf\nginx.conf，找到 server 的配置处，然后按照下面来更改：

 方便复制，文字版如下：

listen       80;
server_name  localhost;
 
#charset koi8-r;
 
#access_log  logs/host.access.log  main;
 
root "C:/WorkDirectory/soft/nginx/vue/dist";
 
location / {
	#root   html;
	#index  index.html index.htm;
	try_files $uri /index.html;
}
 
#拦截/api/请求，因为所有的请求在前端被处理成 '/api+后端接口'形式    
location /api {        
	#开启重写日志记录，这个会记录在error.log里面，级别为notice        
	rewrite_log on;        
	#重写规则，可根据实际情况调整。        
	rewrite ^.+api/?(.*)$ /$1 break;
	include uwsgi_params;
	proxy_pass http://localhost:8080;
	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;
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
	add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";
}

6、配置完成后，启动命令行进入 nginx 目录下输入命令启动nginx：start nginx，访问 http://localhost:80/ 。应该能看到自己的首页。注意：如果要更改nginx的配置，一定在修改前先退出nginx，然后再修改。nginx -s stop 退出nginx.  到此，前端部署完成，接下来到后端。

上图要注意一下，我就是吃了这个亏，怎么也访问不了。 

nginx命令

二、后端部署(采用jar包方式）

1、首先打开后端项目的pom.xml，修改标签里的 war 为 jar。如果没有些标签，默认也是jar，就不用修改了。

2、在后端项目目录执行 mvn install 或通过ide编辑器执行mvn相关命令，我用的是idea，如下图，执行package就可以。最终会产生一个target目录下的jar文件

3 、cd 到 target目录下，cmd窗口中 执行 java -jar xxx-0.0.1-SNAPSHOT.jar （注意名称）

4、测试http://localhost:8080/XXX （xxx为接口请求) 【有人说用http://localhost:8080/api/XXX，按我们的配置不用加api这个路径 】

个人总结 ： 

nginx代理vue前端解决跨域问题，前端发出的请求基路径都添加了api路径，而nginx对api重写，并转发到代理地址，代理地址就是我们的后端服务处理地址，解决了跨域问题。

前端访问： http://localhost:80/，默认会找到index.html【nginx根据配置的目录找到index.html】,前端发出的任何请求基地址都含有api路径，，nginx都会将api替换掉并转发到对应的后台请求：