### 部署 Vue 前端和后端项目的步骤 #### 宝塔面板的安装与配置 对于初次接触宝塔面板的新手来说，首先需要访问宝塔官方网站并按照指引完成Linux版宝塔面板的下载与安装[^1]。首次登录时，建议更改默认的安全设置，比如调整宝塔面板的访问端口，并通过阿里云控制台添加相应的安全组规则来允许外部访问这些端口号。 #### 环境搭建 进入宝塔面板后，默认情况下会有LNMP(Linux, Nginx, MySQL, PHP) 或 LAMP (Linux, Apache, MySQL, PHP) 的一键安装选项，在这里可以选择适合Vue.js应用运行所需的Web服务器环境——即Nginx作为反向代理服务[^4]。为了支持Node.js后端程序，则需额外安装Node.js环境以及可能需要用到的数据库管理系统如MySQL或MongoDB等。 #### 后端部署 针对基于Spring Boot构建的服务端应用程序，可以考虑将其打包成JAR文件并通过Java命令启动；而对于采用Express或其他框架开发的Node.js API接口，则可以直接上传源码至指定目录下执行`npm install && npm start`操作来进行本地调试和服务发布[^5]。 #### 前端部署 关于前端部分，通常做法是先将Vue项目编译为生产模式下的静态资源(`dist`文件夹)，再借助于FTP/SFTP工具把该文件夹内的所有内容复制到网站根路径中。接着在宝塔面板内创建一个新的站点记录，并指向这个存放有HTML/CSS/JS等静态资产的位置。最后编辑对应的虚拟主机配置文件(.conf), 设置正确的index入口文档位置及启用Gzip压缩等功能优化网页加载速度[^3]。 ```bash # 执行此命令用于生成可发布的前端代码包 npm run build ``` #### 测试验证 当上述工作完成后，记得重启Nginx使新的配置生效，随后可以通过浏览器输入域名/IP地址加上相应端口查看是否能够正常展示首页画面，同时也可以尝试调用API接口测试前后端交互逻辑是否顺畅无误。