本项目以Springboot 2.7.11和vue2做参考示例
第一步
展示前后端代码的成品
前端Vue
后端Java
项目写完后,差不多就是这个样子,仅供参考!
第二步
开始打包前后端项目
前端打包的方式有以下几种:
方法1:
#直接打包,简单明了,这个会在你的项目里面出现一个dist的打包文件
npm run build
方法2:
#选择打包路径,可以指定你打包的路径
npm run build -- --dest /path/to/java/project #/path/to/java/project指定你的目录
方法3:
#使用IDEA开发工具进行打包
后端打包
安装成功后就会多出以下目录
admin-0.0.1-SNAPSHOT.jar 这个就是后端打包的jar包
第三步
开始部署项目,部署项目这里有2个方法
方法1:合并部署
就是把前端打包好的静态文件放到你的java工程目录下src/main/resources/static
注意:这个是静态是指dist目录下,不要把dist这级目录一起拷贝过来了
然后就是直接打包你的项目就行,打开的你的虚拟机或服务器把jar放到一个目录里面,然后运行它
启动命令有2种
#前台启动
java -jar xxx.jar
#后台启动
nohup java -jar xxx.jar &
后台启动如何关闭运行的项目
#查找有关java的进程
ps -ef|grep java
#关闭进程
kill -9 pid
这个方法比较简单,不需要使用nginx代理
方法2:分离部署
就是前后端分开单独部署
首先和上面一样,先打包好前后端项目,见dist前端资源文件夹和后端jar包文件放在一个目录(与可以不放到一起,主要方便找)
后端正常启动,前端使用nginx代理,找到你的nginx.conf目录,在你的另一个server结尾加上这个服务器的配置
#服务器
server{
listen 8080;
server_name 127.0.0.1; #你的服务器ip或域名
#前端
location / {
root /usr/local/code_jar/dist;
index index.html index.htm;
try_files $uri $uri /index.html;
}
#后端
location /api{
proxy_pass http://127.0.0.1:8081/; #后端接口地址
}
}
注意: try_files $uri $uri /index.html;这个根据你的vue路由模式可选择是否需要,用来解决history模式下,刷新路由404
补充一下,如果前后端都没有使用统一路径,像/api这样的话,可以用2个分开写
这样就算成功了,可以直接访问到你的项目了
内网穿透部署
如果没有服务器,就可以使用,以下方法来解决!!!
注意事项:内网穿透是让你的内网ip暴露在公网,是很不安全,仅限个人测试比较好。
我这这里使用的内网穿透工具是花生壳+NATAPP,这里我使用了2个内网穿透工具的原因就是前后端分离项目需要分别穿透前后端(这2个工具都有免费的通道,供大家使用!)
比如,我的前端端口是8080,后端端口是8081,分别穿透后,花生壳会给出一个HTTPS的域名,
NATAPP给出一个HTTP的域名,然后前端的接口地址要使用后端穿透的域名
如果不想改,也可以使用nginx代理,来转发给后端,这里方法和上面差不多,就不细说了
另外穿透前端vue后,访问页面出现这个 invalid host header
解决方案:
在你的vue.config,js里面加上
devServer: {
disableHostCheck:true,
};
如果你是vue-cli5就加这个,如果使用就会报错找不到这个属性,因为已经弃用了
devServer: {
historyApiFallback: true, //启用历史记录API回退
allowedHosts: "all", //允许的主机
};