SpringBoot+Vue前后端分离，宝塔面板部署心得

部署的项目是码神之路老师的blog项目，这是个优秀的前后端分离，贴合实际工作开发的，我学习下来，有很大的收获，可以都去学习学习。

一、项目修改

因为开发环境与生产环境不相同，所以需要修改一些相关代码。

1.前端项目修改

前端项目，是可以定义不同的环境变量，对应不同的环境的，在打包时，NODE_ENV: ‘“development”’,代表开发环境，NODE_ENV: ‘“production”’,代表生产环境。进行对应的npm run build就可以了，可惜我是学后端的，前端还不是太了解，我就直接在index.js中修改了。

再在所有的传输给后端的接口上之前都加上/api，我这个项目时在api文件中的js文件中修改，可能你们自己的项目，也有些axios之类的传输，只要是与后端传输的都需要修改

为什么要在接口前统一加上/api?

• 并不是一定是/api，都改成/test，/build，也都行
• 加上之后，是为了在后面进行部署时，nginx进行反向代理时，进行识别，如下代码，当识别到接口上是以/api开头，就会进行反向代理，将此请求，发送给反向代理的ip地址。（另外，我在部署的时候，因为是第一次接触nginx反向代理，我就在想，那我直接location后面不加/api，这样写location / {}那样前端不就不用改了嘛。事实证明，我在瞎扯，如果location / {}这样写的话，那就是正向代理。具体nginx，请小伙伴自行探索）

location /api {
		proxy_pass  http://127.0.0.1:8080
	}

2.后端项目修改

在统一的webconfig文件中进行修改

application文件的修改

前面，我们在修改前端时，我们将接口都加上了/api，那现在生产环境nginx在转发时location / { proxy_pass http://127.0.0.1:8080 }，在ip地址，端口后直接加上/，http://127.0.0.1:8080/，nginx在反向代理时，就会自动去除/api。不加/，就不会自动去除。

但是在开发环境中，没有nginx帮我们进行自动去除/api呀。这时候，你的前端接口时http://127.0.0.1:8080/api/articles但后端接口还是http://127.0.0.1:8080/articles

此时如果你前端在添加/api时，不在pathRewrite中不添加/api的话，那就可以在后端yml文件添加server.servlet.context-path:/api，他这个意思就是改写所有接口，所有接口都前都加上/api。在前端配置文件中添pathRewrite{/api}的话，就代表改写所有接口，去除/api。所有后端添加，和前端去除，只要配置一个就行，一般来说，后端不进行配置，前端配置

二、打包

1.前端项目打包

在终端中npm run dev

完成后,出现dist文件夹，代表打包成功

2.后端项目打包

maven中打包就可以了，package后，target文件夹出现jar包

三、宝塔部署

1.前端部署

如图所示，创建就完了，创建好之后，我们点击根目录，进入文件夹，此时文件夹里有一些自动生成的，我们全给他删除，然后再把前端打包好的dist里的内容上传上去，前端就部署好了

前端网站设置中，不写域名，写ip地址都是可以的，还可以添加多个，就像这样，这时候我直接访问ip地址或者域名，都可以访问到静态页面。此时我们想到，明明我们前端是写的8087端口呀，为啥访问80可以访问，这就是nginx正向代理了，宝塔面板，域名管理自动给我们实现了。

2.后端部署

把jar包放入宝塔面板文件中，我放的地方是在前端域名的同级目录下

创建java项目

部署完成，使用postman测试是否能跑通

四、跨域

安装nginx

解决跨域问题，花费了很长时间，刚开始我是在配置文件中修改，进行跨域的

按理说，这样配置后，就可以了，但是反向代理时，只有get请求可以通过，其他请求都不行。一直报cros错误，我百思不得其解，我只能另寻其他办法。

最后我用宝塔面板，前端项目自带的反向代理配置，配置成功，他也是通过修改nginx达到的，可能是因为我有些语句没有写上吧

打开高级功能，名称随便写，目录就是你要进行判断的目录，我们这里当然是/api，然后目标url，我们是8088端口，发送域名就默认，保存，开启代理就OK。图片的内容是，宝塔面板根据我们刚才填的信息写的代理语句

我也在论坛中刷到，后端和nginx不能同时进行配置，把后端config中跨域配置项注释掉就可以，我也没试，你们可以自己试试

总之，大约就是这么多，搞了我好长时间

欢迎访问
www.mcsyblog.com