项目基本环境: 前端使用Vue, 后端使用SpingBoot + Maven管理, 服务器端使用Nginx代理
项目打包
后端用的Ide开发工具, 在ide右侧Maven Projects工具栏中打开maven管理, 先执行
clean, 然后执行package, 完成打包, 打包完成的文件(一个zip包)在target文件下.Vue项目打包, 执行
npm run build即可完成项目的打包工作, 打包后的文件在dist文件里面, 将其压缩成.zip文件备用. 注意打包前需修改build/utils.js文件中publicPath: '../../和config/index.js文件中的assetsPublicPath: './', 不然打包后相关资源路径可能找不到.
服务器端
Nginx安装配置
先去Nginx官网下载适合自己系统的版本, 本文以Win10为例, 下载完成后将文件解压放在
D:\nginx-1.16.1(自由发挥)Nginx文件路径基本信息: 我们打包后的前端文件直接放在
html这个文件夹中,conf是Nginx的相关配置文件夹,logs是Nginx相关日志记录文件夹,Nginx默认是80端口, 可能出现80端口被占用的情况, 我们这里选择一个最简单的方法, 不使用80端口, 修改Nginx配置文件, 在
D:\nginx-1.16.1\conf\nginx.conf,1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37server {
listen 81;
listen [::]:81 default_server;
# 代理的后端请求接口
server_name 127.0.0.1:9090;
# 文件上传最大值
client_max_body_size 70M;
# 页面文件夹
location / {
root html;
index index.html index.htm;
}
# 把 /api 路径下的请求转发给真正的后端服务器
location /api {
# 把 /api 路径下的请求转发给真正的后端服务器
proxy_pass http://127.0.0.1:9090;
# 获取用户真实IP, 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:81
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 把cookie中的path部分从/api替换成/
proxy_cookie_path /api /;
# 把cookie的path部分从localhost:81替换成your.domain.name
proxy_cookie_domain localhost:81 http://127.0.0.1:9090;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}启动Nginx: 直接运行
Nginx.exe文件, 停止服务:nginx -s stop
启动运行后台
- 找到打包后的后台项目文件解压, 会有一个.jar文件和一个application.properties文件, 以默认配置运行
java -jar youServerFile.jar, 以自定义配置文件(application.properties)运行java -jar -Dspring.config.location=%cd%\application.properties -Dlogging.path=%cd%\log %cd%\youServerFile.jar
