「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。
0 环境
- 系统环境：win10
- 数据库：mysql
- 后端IDE: IDEA
- 前端IDE：vscode
- 转发：nginx
1 前言
2 问题解决
- idea(后端)打包报错
有专门的打包命令脚本xx.shell和xx.bat版本的，有兴趣的话，可以搜索一下，很多开源项目都会看到，可以借鉴一下。
报错：当idea 报 Cannot access alimaven (maven.aliyun.com/nexus/conte…) in offline mod，如下处理，找到maven选项，取消work offline勾选(也就是第一行)。
- vue(前端)打包
vue run build
- nginx转发
目标对象：当浏览器输入http(或https)://xxx:8088端口通过nginx请求转发到http(或https)://xxx:8087这个端口上。
nginx.conf的配置，如下：
区分下面的前端地址和后端地址，前端-->(location ~后面跟着正则匹配)，给root指定路径时，一定要加
/，不然找不到dist下的文件，expires是缓存，一般30天即可，index正常index.html或index.htm结尾url。这里的listen监听的是前端的端口(浏览器输入的那串地址)，后端 -->location /，重定向到后端指定的ip(8087)上面。
server {
# 监听地址
listen 8088;
server_name 127.0.0.1;
location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
#所有静态文件直接读取硬盘
root html/dist/;
index index.html index.htm;
expires 30d; #缓存30天
}
location / {
# 跳转到后端的ip地址
proxy_pass http://127.0.0.1:8087/;
proxy_redirect default;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3 小结
前后端分别打包好后，都部署到服务器上，都运行起来了，但是无法相互访问，可以在浏览器上查看，它访问后端的报错状态，进而判断是前端还是后端的锅，后端别忘了加跨域，假如只是本地程序，同局域网内的访问不了，看看防火墙是否是开着的原因，或者端口被占用/禁用等原因，若是云服务器，看看防火墙以及别忘了添加安全组。当然也有可能是nginx配置问题，比如监听、转发地址填写错误等。
