写在前面
博客为工作小记。
现在前后端分离的项目，关于前端的部署，主要有两种方法：
- 打包后直接放在Spring boot的static文件夹下
- 打包后用Nginx进行部署与接口转发
废话警告
为什么要采用第二种方式呢？个人看法：前后端分离的最简单、直接目的就是——前后端分别开发。1所述的方式虽然也是分别开发的，但是部署的时候还是把编译后的文件放到了后端代码里，然后后端再打包，使得后端有些“臃肿”。虽然这种方式比较简单，但我个人觉得，其实是违反了前后端分离的本意。并且使用Nginx来部署可以带来Nginx自身的一些负载均衡等优势，是企业级开发的标准选择。
安装Nginx
随便写点，安装过程不是很重要。
官网下载一个稳定版本。官网链接.
下载后随便解压放在一个地方即可，比如桌面。
然后几条常用命令，先cd到nginx的更目录。
1.启动nginx
start nginx
2.关闭nginx
nginx -s quit
3.重载配置（已经启动的情况下，修改了配置，执行命令。当然，你可以关了重开）
nginx -s reload
打包VUE项目
在webstorm的terminal内运行
npm run build
完成后会生成一个编译好的dist文件夹，里面包含了img、css、html等文件。
配置nginx
目的：
- 部署打包后的静态资源。
- 反向代理，将前端的请求转发到后端。
一个demo:
server {
# 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
listen 8888;
# 服务名称，无所谓
server_name localhost;
# 打包好的VUE项目
root C:\Users\lenovo\Desktop\dist;
# 项目根目录中指向项目首页
index index.html;
client_max_body_size 20m;
client_body_buffer_size 128k;
# 根请求会指向的页面
location / {
# 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
# 请求指向的首页
index index.html;
}
# 由于路由的资源不一定是真实的路径，无法找到具体文件
# 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#配置请求转发
#注意地址里的几个"/"，"http://localhost:8888/api/"转发到"http://localhost:8023/"
location /api/ {
# 后端的真实接口
proxy_pass http://localhost:8023/;
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;
proxy_set_header Cookie $http_cookie;
}
}
记录一个错误
中途调试的时候，发生了这样一个问题：在开发环境中毫无问题，但是打包在nginx上部署后，有部分接口在访问时爆出：We’re sorry but mobile doesn’t work properly without JavaScript enabled. Please enable it to continue
在网上查了查，也仔细比对了一下代码，发现问题如下啊：
//修改前
getRequst('aop_logout').then(resp=>{
console.log(resp);//打印返回消息，内容即为上述的报错
getRequst('logout');
});
//修改后，加了"/"
getRequst('/aop_logout').then(resp=>{
console.log(resp);
getRequst('/logout');
});
// 这是配置的axios方法，可以很明显的看出少了"/"会出现字符串拼接错误，但为什么开发环境下正常运行就不知道了
export const getRequst=(url,params)=>{
return axios({
method:'get',
url:'/api'+url,
data:params,
})
};
所以请求其实根本没到达后端，所以后端的响应代码也没有执行。