使用pm2部署vue项目

使用pm2在服务器运行vue项目

为什么要使用pm2运行vue项目
1.打包项目
2.搭建服务
3.pm2启动项目

为什么要使用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 -Dconst 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 就可以访问项目了

使用pm2部署vue项目相关推荐

centOS7下安装nodejs+nginx+mongodb+pm2部署vue项目
一.购买服务器并远程连接 1.购买服务器和域名可以选择阿里云或者是其他的厂商的服务器.然后会获得服务器ip地址,用户名和密码. 购买域名,将域名绑定到ip地址上. 2.下载xshell,winscp ...
使用pm2部署nuxt3项目
众所周知,nuxt3.js是基于vue开发ssr,seo的项目比较好的框架,那么开发完成项目,如何部署nuxt项目也是比较重要的,接下来就记录一下我在开发中是如何部署的. 这篇文章只是对配置环境变量做 ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
nginx下部署vue项目
nginx下部署vue项目今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://ngin ...
nginx下部署vue项目概览 - （资源篇）
相关博客: nginx下部署vue项目概览这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...
如何使用Caddy部署Vue项目
如何使用Caddy部署Vue项目 Caddy配置 rewrite {regexp .*to {path} / }
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...