上海h5网站建设,脑洞大开的创意设计,网站已运行时间代码,新品发布会流程本项目以Springboot 2.7.11和vue2做参考示例 第一步 展示前后端代码的成品 前端Vue 后端Java 项目写完后#xff0c;差不多就是这个样子#xff0c;仅供参考#xff01; 第二步 开始打包前后端项目 前端打包的方式有以下几种#xff1a; 方法1: #直接打包#xff0…本项目以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 jar包名称#后台启动 nohup java -jar 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 /proxy{proxy_pass http://127.0.0.1:8081/; #后端接口地址} } 注意 try_files $uri $uri /index.html;这个根据你的vue路由模式可选择是否需要用来解决history模式下刷新路由404 这样就算成功了可以直接访问到你的项目了 内网穿透部署 如果没有服务器就可以使用以下方法来解决 注意事项内网穿透是让你的内网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, //允许的主机 };