如何使用pm2部署vue项目暨vue打包教程 - 程序员阿鑫-带你一起秃头!

如何使用pm2部署vue项目暨vue打包教程

作者: 程序员阿鑫

好兄弟,我们一起掉头发!

手机扫码查看

标签:

教程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 就可以访问项目了,好了,开启好的可以走了,全部搭建完成之后运行不起来的接着往下看

4.pm2启动失败

在我搭建的时候遇到这种情况,运行pm2后,一刷新就看见没启动起来,还是红的

这时候就应该去看运行日志

Error:Cannot find module 'express'    错误:找不到模块'express'

如果你是遇到这种情况报错,可以在打包之前在文件根目录执行一下

npm install //下载一下npm缺少的文件

 测试的太多,我也忘记是不是这样了....试一下吧

站长这是第一次接触vue...这是刚开始打包的时候研究好几个小时研究出来的成果,如有错误,敬请谅解,多多斧正

以上是《 如何使用pm2部署vue项目暨vue打包教程》的全部内容,

感谢您对程序员阿鑫博客的支持!

分享到:
打赏
未经允许不得转载:

作者: 程序员阿鑫, 转载或复制请以 超链接形式 并注明出处 程序员阿鑫-带你一起秃头!
原文地址: 《如何使用pm2部署vue项目暨vue打包教程》 发布于2021-1-27

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

如何使用pm2部署vue项目暨vue打包教程

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏