使用pm2部署vue项目

为什么要使用pm2运行vue项目

可能很多人都会疑惑，使用vue做好的项目直接打包放在服务器上不就可以了吗？
众所周知 vue打包后会生成一个名为dist的静态资源文件夹，那么如果想要在云服务器访问这些资源只能通过 http://xxxx.com/dist/index.html来访问。
如果想要和vue脚手架搭建的本地项目一样 使用端口号来监听/运行项目（如：http://xxxx.com:8080）,我们就需要自己搭建一个服务，然后通过pm2进行启动。

1.打包项目

npm run build  //vue脚手架默认打包命令，打包后会在当前项目文件夹创建一个名为dist的文件夹

2.搭建服务

首先在当前项目文件夹里创建一个bin目录，bin目录下创建一个js启动文件，名字自己起（名字不可和别的项目启动文件冲突），这里命名的是demo.js

const express = require('express'); //npm下载并引入express模块 npm -express -D

const app = express();
app.use(express.static('../dist')) // ../dist 为vue打包后dist文件夹的路径
app.listen(8080,function(err){  //8080 想要监听项目的端口号
	if(err){
		console.log(err)
	}else {
		console.log('项目启动成功')
	}
})

3.pm2启动项目

首先解释一下为什么要使用pm2启动项目，vue自带的启动服务命令只能在终端开启的情况下运行，如果关闭终端 则该项目的服务也会跟着一起关闭，而使用pm2命令启动的服务 是一直运行的，就算关闭终端 项目服务也不会停止。

安装pm2插件（xshell进入当前项目的bin路径）

npm i -g pm2  //安装pm2插件到全局

启动服务

pm2 start demo.js //启动名为demo.js 的启动文件

关闭服务

pm2 stop demo.js

重启服务

pm2 restart demo.js

启动后在浏览器输入 http://xxxx.com:8080 就可以访问项目了