部署VUE+SpringBoot+nginx项目

本文是前端是vite + element-plus

后端 springBoot

部署整个项目主要分为3个步骤，

1. 部署nginx，主要是配置nginx.conf   

2.打包前端代码   

3.打包后端代码

1.安装nginx

安装手顺：

linux安装nginx_linux安装nginx需要gcc还是gcc-c++-优快云博客

|

|

配置nginx.conf文件报错：

nginx: [emerg] unknown directive “ “ in /etc/nginx/conf.d/XXX.conf:122”

问题解决：“nginx: [emerg] unknown directive “ “ in /etc/nginx/conf.d/XXX.conf:122”_nginx: [emerg] unknown directive "passenger_root" -优快云博客

访问nginx出现403错误

https://blog.youkuaiyun.com/hzp666/article/details/136299416

2.部署前端应用

主要就是打包，然后把dist文件夹手动打个压缩包，扔到服务器上，然后把压缩包解压到 nginx.conf中配置的前端工程位置中，然后 重启下服务  nginx -s reload。

这里使用 pnpm 和 vite 打包

执行命令   pnpm run build 

报错：

1. >sdinopharm-dashboardao.0.0 build C: \doc\myProject\sinopharm-hr-schedule-frontend
> run-p type-check "build-only  @r” -
run-p’不是内部或外部命令，也不是可运行的程序
或批处理文件

解决方法：pnpm i

2. 部署后发现vue页面没有显示完全，

可能原因：element-plus没有打进包里

解决办法：引入element-plus

基于 Vite + Vue3 项目中三种引入 Element Plus 方式的对照说明-优快云博客

3. assert下图片没有显示

vue打包后assert的文件找不到， 报404

最简单的方法就是打包后，手动把图片放到dist 的 assert目录下：

4.页面找不到

打包命令换成

pnpm run build --base=/rank/

rank  是nginx 该项目路由的根目录

二、部署后端应用

在idea中，先clean 再package

打包好以后jar包会在，target 目录下：

项目打包：

springboot项目打包成jar_springboot打包成jar-优快云博客

linux下：
1查看当前jar的pid

ps -ef|grep jar包名

2.终止当前jar

kill -9 pid

 3、启动指定项目

nohup java -jar jar包名 --server.port=指定端口号  > 日志文件.log 2>&1 &

nohup 和 & 是保证后台运行不终止的意思，2>&1是将错误输出定位到左边的文件中

4. 如果要指定不同环境

4.1 需要在代码中配置2个 propeties，（一个生产环境，一个测试环境）

2个yml文件，修改为对应的数据库地址（一个生产库，一个测试库），以及两个环境在同一服务器的话，端口号不能一样。

4.2  在Linux 系统中部署，使用  --spring.profiles.active 参数来区分不同环境

nohup java -jar hr-dashboard-api-0.0.1-SNAPSHOT.jar --server.port=8082 --spring.profiles.active=prod  > pq_backend.log 2>&1 &

ps： 这里的参数值 只需要填 application-  后边的名字即可

报错：

1. maven-compiler-plugin报红，Plugin 'org.apache.maven.plugins:maven-compiler-plugin:3.8.1' not found

maven导入依赖报错的原因，极有可能是你通过maven下载这些依赖的时候网络发生错误，导致你本地的的文件并不完整，所以会报错，但是因为已经下载好了一部分，你这个时候刷新maven并不会重新下载，会一直使用该半成品文件，所以会一直报错。

        解决方法：为根据idea提示的报错路径在maven本地仓库中找到该文件，删除后刷新maven重新下载就可以了！
                        https://blog.youkuaiyun.com/Aiden_Jay/article/details/132227469

把下图中的包全部删掉

以上完工！