若依前后端多环境打包
参考:若依前后端分离版本,Windows下使用Nginx代理的方式进行部署(全流程,图文教程)
- 关于后端打包注意事项
- 多环境的话,切换指定的yml来打成jar包
- idea打包maven,spring boot项目,并修改jar包名称
- 具体操作在pom.xml中加入依赖
- 去掉mybatis的sql打印
-
在application.yml(.properties)中增加配置,在控制台打印sql:
mybatis configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
- 屏蔽到 #log-impll 这一行就没有sql日志了
-
jar包起来后,通过访问验证码的地址测试 http://localhost:8080/captchaImage
-
前段vue打包
-
打包优化:vue项目打包优化之-productionSourceMap设置
-
vue.config.js中
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false,
在设置了vue.config.js之后,就不会生成map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题,并且不想被看到源码,就把productionSourceMap 置为false,既可以减少包大小,也可以加密源码。
-
-
vue.config.js中的配置
-
-
这里的target是代理的请求后台的接口,对应上面部署的后台接口的url,下面还有一个路径重写,添加了一个
process.env.VUE_APP_BASE_API]:
-
vue的代理配置pathRewrite
-
pathRewrite:重写路径
后端识别时候把/dev-api替换成空,后端没有/dev-api
-
前段请求地址是有 /dev-api 后端是没有的
-
-
所以在使用
npm run dev
运行项目时,请求都会被代理到你设置的localhost:8080/dev-api下
所以要保证你在自己的本地运行前端项目和后台项目后能代理成功,即本地的前端能访问到本地的后台接口。
接下来将前端打包。
首先打包之前确保已经安装完依赖项,即
npm install 成功且没问题。
-
首先将上面的这个端口改为你要在打包后访问的端口,即使用nginx代理前的接口。
这个端口默认是80端口,这里把其修改为不会冲突的70端口,不推荐使用80端口。
因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。
除了这个70端口外,下面的target的url和端口要和你服务器上能访问到后台的接口一致。
然后在VSCode中新建终端,或者在前端项目下打开cmd
npm run build:prod
进行前端项目的打包
-
-
nginx配置
-
-
首先这里的listen下的端口就是代理前的接口,要与前面前端项目的vue.config.js中的端口一致。
server { listen 70; server_name 10.229.36.158;
然后下面的server_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost,避免修改hosts文件导致的问题。
所以这里就直接设置你要部署项目的服务器的ip。
然后下面的location /下面配置的就是代理前前端静态资源的路径等。
root 对应的就是在服务器上前端资源的dist目录的全路径,即代表根路径。
下面的两个配置保持默认不要更改,配置的是防止404和入口页面。
location / { root D:/www/kaoqin/dist/; try_files $uri $uri/ /index.html; index index.html index.htm; }
然后再下面的location /prod-api/ 就是配置的代理后的地址。
location /prod-api/ { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; }
这里的 /prod-api/就是跟前面前端项目设置代理的路径重写一致。
下面的一些是设置请求头等,防止出现跨域问题。
然后最下面的proxy_pass就是设置的代理后的地址,即你的服务器上后台接口的url。
通过上面两个配置就能实现在服务器上所有的请求
只要是通过
http://10.229.36.158/70/dev-api/
发送过来的请求全部会被代理到
下。这样就能实现前后端项目的请求代理。
-
nginx 路径不能有空格 或者中文名啊
-
-
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升