Vue前端项目部署到宝塔面板的详细过程

目录

前言

一、项目的打包与上传

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项目->添加站点。

将目录设置为刚才上传的目录，并设置域名。注意，域名需要在腾讯云解析之后，才可以正常访问！

三、总结

前端部署需要在后端部署完成之后，因为需要后端地址。主要流程是修改连接后端服务器的地址，打包上传项目，启动站点。