宝塔部署vue项目详解

一、项目环境准备

1、安装宝塔面板

如果你还没有安装宝塔面板，可以在官网上进行下载并按照官方文档进行安装，宝塔面板是一款非常好用的服务器运维工具。

2、安装nodejs环境

在宝塔面板中的软件商店中找到nodejs并且按照提示进行安装，nodejs需要最好选择最新的稳定版本。

3、安装vue-cli脚手架

在终端中执行命令：npm install -g vue-cli，以全局方式安装vue-cli脚手架，vue-cli可以快速构建出vue项目的基础环境。

4、安装git

在宝塔面板中的软件商店中找到git并且按照提示进行安装，git需要用于从代码仓库进行代码的拉取。

二、拉取vue项目代码

将vue项目代码通过git进行拉取，这里以github为例：

git clone https://github.com/user/repo.git

如果没有将代码放到指定目录下，那么需要进入到项目目录下执行以下命令：

cd repo

三、安装依赖

在项目目录下执行以下命令，安装所需依赖包：

npm install

通常情况下，这个过程会耗费一些时间，请保持耐心。

四、打包项目文件

在项目目录下执行以下命令，打包项目：

npm run build

完成后，会在项目目录下生成一个/dist目录，里面包含了最终生成的静态文件。

五、创建站点并上传项目文件

在宝塔面板中，选择网站->添加网站，输入网站相关信息，确认后即可创建站点。

进入站点后，选择文件管理器->web目录，创建一个新的目录用于存放vue项目文件。

将刚才打包生成的静态文件进行上传，并将文件的权限设置为www:www。

六、配置nginx反向代理

在宝塔面板中，选择站点->反向代理，添加一个新的反向代理规则：

代理名称: vue
代理协议: http
代理目录: /
目标URL: http://127.0.0.1:port or 主机ip:port

按照以上规则进行配置后，提交即可生效。

七、配置nginx转发策略

在宝塔面板中，选择站点->配置文件，找到nginx.conf文件进行编辑。打开文件后，将以下代码添加到http块中：

location / {
    proxy_pass http://127.0.0.1:port or 主机ip:port;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

按照以上规则进行配置后，提交即可生效。

八、启动项目

在项目目录下执行以下命令，启动项目：

npm run start

如果需要使用pm2进行管理，那么可以执行以下命令进行安装：

npm install -g pm2

直接使用pm2启动项目：

pm2 start npm --name "vue-demo" -- start

总结

以上就是宝塔部署vue项目的详细流程，按照以上步骤进行操作，基本上可以在几分钟的时间内完成vue项目的部署工作。但是需要注意的是，以上过程中可能会遇到一些问题，遇到问题的时候需要多看一看官方文档或者询问其他开发者的意见。希望这篇文章能够对vue开发者在宝塔上部署vue项目有所帮助。