宝塔面板部署Vue项目

  宝塔面板（BT Panel）是一款功能强大的服务器管理工具，支持网站、数据库、FTP、SSL等多种服务的管理，适用于各种Web项目的快速部署和管理。本文将重点介绍如何使用宝塔面板部署 Vue 项目。通过这些步骤，你可以快速将本地开发的 Vue 项目部署到服务器上，确保项目在服务器上能够稳定运行。

本地运行

解压文件

解压他人发给你的vue项目，如果这个vue项目里有node_modules这样的包的文件，在解压后把他们删除，重新下包

建议：在压缩vue项目时就删除这些文件，减少压缩包的大小

下载包

在cmd中使用命令npm install下载vue项目的包

注：如果下载速度过慢，可以使用npm config set registry https://registry.npm.taobao.org切换淘宝镜像

运行

下载完成后输入npm run dev运行，确保项目在本地可以正常运行

部署宝塔

本文只介绍vue部署的部分，在部署vue之前，可以先把后端部署到服务器并更改好本地项目的api地址

构建项目

在cmd面板运行npm run build构建项目，构建完成会出现如下提示

在项目目录中会有生成一个dist文件夹

上传文件

将dist文件夹压缩，上传至宝塔面板-文件-wwwroot下的项目文件夹内并解压缩（解压后可以删除压缩包）

添加站点

选择网站-PHP项目-添加站点，并按下图设置

域名处可为网站的服务器地址（默认80端口）或者添加好的域名

根目录为刚才上传dist文件的目录

注意：如果使用的服务器地址IP，但是不是80端口，需要在云服务器和宝塔面板中对端口进行放行。

此时访问设置的这个地址，就可以看到部署好的网站了。