这里写目录标题
vue+nginx+tomcat(windows)项目发布部署开发环境到生产环境整体流程(若依框架为例)1.vue+nginx+jar包方式发布前台vue项目打包后台java代码打成jar包(idea为开发工具)安装nginxvue部署到nginx运行jar包nginx+jar包访问 2.vue+nginx+war包方式(需要用tomcat)发布vue前台打包后台达成war包nginx安装安装tomcatvue+nginx配置war包部署到tomcatnginx+tomcat常见问题vue+nginx+tomcat(windows)项目发布部署开发环境到生产环境
整体流程(若依框架为例)
前台项目打包 ,后台项目打包,发布到nginx/tomcat
1.vue+nginx+jar包方式发布
前台vue项目打包
1.执行npm run build:prod(根据自己的开发环境命令自己调整)打包后的文件生成在同级目录dist文件夹里面
后台java代码打成jar包(idea为开发工具)
确认打包方式为jar
使用maven工具 同时选中clean和package 点解上面的倒三角
打包后的生成target里面对应的jar包
安装nginx
下载nginx windows版本 选择 Stable version 稳定版
将下载的zip进行解压即可
进入到nginx目录
使用 start nginx 启动服务
启动后会闪一下 然后打开任务管理器查看详情查看nginx是否启动成功
如果启动成工会有进程
如果未启动成功打开logs文件夹查看error.log
常见问题 端口号被占用
7684#1064: bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
进入conf文件夹 修改nginx.conf中的端口号
然后重新加载 nginx -s reload
进入地址成功
vue部署到nginx
将生成dist放到任意位置 修改nginx.conf配置文件 可以填写绝对路径或相对路径
重启nginx
重新进入localhost:8088 看到vue项目已经展示成功
运行jar包
进入到jar包所在路径
java -jar XXXXX.jar 启动
输入地址+端口号
说明jar包成功
nginx+jar包访问
修改nginx.conf
最后地址为后台地址和端口号
此时访问还是无法访问到后台
打开浏览器调试模式 找到发送请求url
url里面 多一个prod-api 所以还需要修改nginx.conf
重启nginx -s reload
在进入看到验证码出现 输入即可成功进入
2.vue+nginx+war包方式(需要用tomcat)发布
vue前台打包
和上面一样 参考即可
后台达成war包
修改配置文件 jar改成war
去除内置tomcat 添加如下配置
然后mvn打包 方式同打jar一样 选择clean package 运行maven
生成war包在target里面
nginx安装
和上面一样 参考即可
安装tomcat
网上下载安装即可 启动localhost:8080即可看到tomcat首页 证明安装成功
vue+nginx配置
和上面一样 参考即可
war包部署到tomcat
将war包拷贝到apache-tomcat-8.5.63\webapps目录里面
修改apache-tomcat-8.5.63\conf\server.xml中端口号(默认8080)使其和后台war包里面保持一致,如果后台也是8080可以忽略此步
修改默认根目录(此时更目录为webapps) 要访问war包url为localhost:8080/pms-admin
修改默认根目录输入localhost:8080使其即可访问
添加
nginx+tomcat
上面已经配置好nginx和tomcat 直接启动nginx即可
注意事项:1.打开url为nginx里面的端口号
2.nginx指向端口号为tomcat端口号
常见问题
刷新页面404
解决办法
添加 到 nginx.conf 配置文件中try_files $uri $uri/ /index.html;
404解决后出现401 一直过期重新登录
是由于url端口号后面没有加 /
修改如下即可