本项目以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", //允许的主机
};
好文阅读
发表评论