利用宝塔面板进行前端项目上线部署(图文)

1.首先进行宝塔面板的登录

2.进行前端项目的打包(演示项目为Vue3项目)

2-1 首先通过编辑器(Vscode)打开前端项目

2-2 修改项目中的接口文件，将接口修改为之前后端上线的Ip+端口(宝塔面板Ip+开放端口)

例如:8.140.31.204:3456

2-3 在终端中输入命令 npm run build 利用webpack 进行前端项目的打包

2-4 打包成功后会有一个dist文件，将dist文件进行压缩

2-5 如果宝塔面板中已有上传的打包前端项目，则修改文件夹名称(自定义名称即可，若无打包项目，默认名称(dist)即可)

3.本地打包好项目后，来到宝塔面板进行项目上线部署配置

3-1 点击文件，进入根目录下的www下的wwwroot文件夹进行前端项目上传

3-2 上传成功后，进行项目解压

3-3 点击网站，进入PHP项目，进行添加站点

3-4 进行项目配置

域名：若第一次进行站点添加，域名为宝塔Ip+自定义端口，这里要注意的是，若已经有一次上线，若再输入宝塔Ip+自定义端口，就会出现此站点已占用的提示，这里使用两个域名解决，第一行输入一个自定义域名(随机),第二行输入真实的IP+端口号，随后删除第一个自定义域名即可

备注:自定义

根目录：为刚才上传的前端项目目录

其他设置默认即可

4.上线部署完成，进行测试

4-1 浏览器url地址栏中输入(宝塔面板Ip+端口号)进行测试

注意:这里的端口号一定要在宝塔面板安全中和阿里云安全组中放开，若不清楚如何放开端口可查看主页中后端部署中的放行端口步骤进行放行)

4-2 进行测试，若设计到后端操作，比如登录，可以登录成功则上线成功