目录
前言
一、项目的打包与上传
1、修改前端项目
2、关于test环境的补充修改
3、打包前端项目
二、添加站点，启动项目
三、总结
前言
书接上回
SpringBoot项目部署到宝塔面板的详细过程-CSDN博客
本次以SmartAdmin的项目为例，通过宝塔面板部署，对部署过程进行一个完整演示，不同项目的部署也可能略有不同。过程仅为参考。
准备工具：可正常登录宝塔面板、Vue项目（本文以SmartAdmin的开源项目为例）、WebStorm 2024.2.2（或其他编译器）
Vue项目的部署与前端项目部署类似，不过省去了数据库的一步，主要有两个步骤，一是项目的打包与上传，打包之前需要进行必要的修改，如修改连接的后端的地址，修改baseUrl等等；二是在服务器启动项目
一、项目的打包与上传
1、修改前端项目
这里主要修改前端链接后端的地址，对于.env.test文件，只有url需要修改，这里修改为后端地址，这个地址是刚才后端项目设置的域名。
如果你的项目不适用.env文件，可以找一找项目中配置的前端链接后端地址的位置，修改一下即可。
2、关于test环境的补充修改
这里主要检查baseUrl，我们期望的baseUrl为“/”。
检查根目录下的vite.config.js，确保base的值为“/”，项目默认给base赋值的三元运算符的值恒为“/”。
检查package.js文件，发现build：test脚本执行时，重新设置了base的值，启动脚本时添加的指令会覆盖掉vite里面的配置，这可能导致前端项目部署后错误访问到了/admin，这里为了方便这里把base的设置移除，即删除“—base=/admin”，使用vite中的配置即可。
上述为此项目test环境特有，大家可以按需修改。
3、打包前端项目
SmartAdmin官方给了以下指令进行项目打包，在黑框执行如下代码之一
npm run build:prod
npm run build:test
npm run build:pre
分别对应三种不同的环境，这里选择执行
npm run build:test
打包完成之后，根目录下会生成一个dist文件夹。
打开宝塔面板将此文件夹上传，这里上传的目录是/home/smart_admin_v3/dist。
如果你的项目没有那么复杂，package.js没有设置那么多脚本的话，可以修改完后端连接地址之后，执行
npm run build
即可
二、添加站点，启动项目
点击网站->php项目->添加站点。
将目录设置为刚才上传的目录，并设置域名。注意，域名需要在腾讯云解析之后，才可以正常访问！
三、总结
前端部署需要在后端部署完成之后，因为需要后端地址。主要流程是修改连接后端服务器的地址，打包上传项目，启动站点。
