Vue-CLI3.x 自动部署项目至服务器的方法步骤

Vue-CLI3.x 自动部署项目至服务器的方法步骤

Vue-CLI3.x 是一个官方发布的 Vue.js 项目脚手架工具，它能够快速创建一个基于 Vue.js 的项目，并提供了非常方便的开发工具。在使用 Vue-CLI3.x 进行开发过程中，为了能够让我们的项目能够在服务器上运行，需要对项目进行自动部署。本文将为大家介绍基于 Git、NodeJS、PM2 部署 Vue-CLI3.x 项目至服务器的方法步骤。

步骤一：在服务器上安装 Node.js、Git

安装 Node.js：

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

安装 Git:

sudo apt-get update
sudo apt-get install git

步骤二：在本地安装依赖并打包项目

npm install
npm run build

执行此命令后，会生成一个打包后的 dist 目录。

步骤三：将项目推送至Git服务器上

可以使用 GitHub、GitLab 等平台创建一个代码仓库，将项目推送至远程仓库。

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourname/yourproject.git
git push -u origin master

步骤四：在服务器上将代码拉取至本地

git clone https://github.com/yourname/yourproject.git
cd yourproject
npm install

步骤五：用PM2管理应用程序

安装 PM2:

npm install pm2 -g

启动应用程序:

pm2 start npm --name "yourproject" -- run start

此时, 直接访问 http://yourserverip:port 即可访问应用程序。

示例一：在阿里云服务器上使用PM2部署应用程序

1. 远程登录你的服务器

ssh root@<yourserverip>

1. 在服务器上安装 Node.js、Git

参照步骤一中的命令进行操作。

1. 在本地进行项目依赖安装和构建

npm install
npm run build

1. 将项目推送至远程仓库

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourname/yourproject.git
git push -u origin master

1. 在服务器上将代码拉取至本地

git clone https://github.com/yourname/yourproject.git

1. 在服务器上安装 PM2，并启动应用程序

npm install pm2 -g
cd yourproject
npm install
pm2 start npm --name "yourproject" -- run start

1. 如果需要在服务器重启后自动启动应用程序

pm2 startup systemd
pm2 save

示例二：在腾讯云服务器上使用PM2部署应用程序

1. 远程登录你的服务器

ssh root@<yourserverip>

1. 在服务器上安装 Node.js、Git

参照步骤一中的命令进行操作。

1. 在本地进行项目依赖安装和构建

npm install
npm run build

1. 将项目推送至远程仓库

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourname/yourproject.git
git push -u origin master

1. 在服务器上将代码拉取至本地

git clone https://github.com/yourname/yourproject.git

1. 在服务器上安装 PM2，并启动应用程序

npm install pm2 -g
cd yourproject
npm install
pm2 start npm --name "yourproject" -- run start

1. 如果需要在服务器重启后自动启动应用程序

pm2 startup

执行此命令后，会输出一段命令，需要将该命令粘贴到终端中，并执行：

sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u root --hp /root

最后执行以下命令：

pm2 save

这样 PM2 仅在服务器重新启动之后，才会自动启动应用程序。