一、VUE项目打包
首先简单介绍一下我使用的前后端项目都是人人开源的项目。可自行下载。
打开VSCode的终端，运行如下命令
npm run build
这个命令会将vue项目的所有代码转换为css、js和html格式，以便能在大部分的浏览器上运行。
运行成功后，会在项目中生成dist文件夹，备用。
（PS：项目最好使用Node版本为12.xx.xx的版本，最新的版本和低于12版本的可能会出现一些意想不到的问题，如：打包时候会报找不到python/vscode、打包好后前端页面空白加载不到静态文件等，试了网上的很多方法，都不管用，果断换了个版本试了试-。-，很顺利，直接一次性成功。）
二、Springboot项目打包
1、pom文件引入打包依赖
<plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.3.4.RELEASE</version></plugin>
2、Idea的Maven管理
找到要打包的项目，双击package
注：如果不是用的idea，可以直接使用mvn package命令进行打包
打包成功后，在对应路径找到打包好的jar包。
三、服务器部署
1、宝塔面板
我的服务器已经提前安装好了宝塔面板，可以帮助你傻瓜式安装一些linux必备应用。宝塔安装方法。
2、上传文件
- 上传后端项目打包好的jar
- 上传前端打包好的dist文件夹
利用SSH工具上传（WinSCP/FinalShell/Xshell等等网上很多），此处我上传到了服务器的/home/project文件夹下
3、Nginx配置
宝塔面板插件安装上Nginx后，在首页点击Nginx，找到配置修改，修改内容如下
server { listen 80; server_name 服务器IP; index index.html index.htm; # 允许跨域请求的“域” add_header 'Access-Control-Allow-Origin''*'; # 允许客户端提交Cookie add_header 'Access-Control-Allow-Credentials''true'; # 允许客户端的请求方法 add_header 'Access-Control-Allow-Methods''GET, POST, OPTIONS, DELETE, PUT'; # 允许客户端提交的的请求头 add_header 'Access-Control-Allow-Headers''Origin, x-requested-with, Content-Type, Accept, Authorization'; # 允许客户端访问的响应头 add_header 'Access-Control-Expose-Headers''Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma'; location / { root /home/project/dist; index index.html; } location /study{ #后台 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://服务器IP:jar包的端口/项目名称/; } #error_page 404 /404.html; include enable-php.conf; access_log /www/wwwlogs/access.log; } include /www/server/panel/vhost/nginx/*.conf; }
修改完成后，点击服务->重载配置。
4、服务后台启动
终端，输入如下命令，即可后台启动
nohup java -jar /home/project/renren-fast.jar > /dev/null 2> /dev/null &
启动成功后，输入如下命令查看是否启动成功
ps-ef | grep java
出现如图所示，表示成功启动
四、访问
快打开浏览器地址栏输入自己的服务器ip试一下吧（如果配置了域名，可直接使用域名访问）
