Spring + vue 项目部署(全网最详细教程_含内网穿透部署)

本项目以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", //允许的主机
};