使用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 就可以访问项目了