webstorm启动方法以及pm2插件

àì夳堔傛蜴生んèń 2022-05-09 12:36 812阅读 0赞

我们在学习Node.js的时候，经常会配合Vue等这样的框架进行工程化构建，但是在代码编写的阶段需要使用

npm run dev 或者 cnpm run dev

启动前端的试图，进行挂载，但是如果要进行前后端调试的话，必须启用node，才能进行本地数据库增删查改，而我们启用node服务的方式有很多种，其中有些方法非常方便：

下面是我练习的一个项目，为了方便代码调试，把node和vue放在了同一个目录下，后端采用的是Express框架，其中server里面就放着我的后端文件，/server/bin/www 这个目录下的www文件就是node的启动文件

![70][]![70 1][]

### 好的下面介绍下3中node服务启动和调试方法： ###

## **1.通过node.js自带的命令进行启动** ##

不管你使用的是系统cmd命令行还是一些IDE自带的命令行如webstorm的Terminal，他们本质上都是一样的，

首先都是要进入到你的项目工程下

![70 2][]

然后输入如下node命令最重要的是找到www文件，然后就可以在[http://localhost:3000][http_localhost_3000]（默认）访问了

node server\bin\www

## **2.webstorm配置启动入口** ##

webstorm是前端开发爱好者非常喜欢的一个工具，我个人就非常喜欢webstorm，尤其是2018版本的界面优化和代码键入人性化做的非常好，之前我也用vscode，vscode很轻量，但webstorm对于node+vue这种前端项目的调试更为方便。话不多说，直接上图，大家应该能看的明白。

![70 3][]

在default中找到node.js的模板，然后找到三个路径，就课程创建成下面的样子了

![70 4][]

配置好之后，以后你就可以直接通过点击webstorm右上角的按钮来启动这个项目的node了，需要注意的是播放符号是直接启用，旁边红色虫子样式的是debug模式，可以进行断点调试

![70 5][]

## **3.一个你一定要知道的插件：pm2** ##

**pm2可以开启很多项目,如果用node的启动的话,就只能启动一个项目.**

这是一个基于进程管理的，非常强大的插件，注意重点——>"进程管理"，那么他可以把node放在一个进程当中，启用一次，无须始终开启一个命令行去运行，可以同时去键入其他的命令，而不需要另外再开启一个命令行工具。

在npm中查询这个插件，可以看到它的相关信息

![70 6][]

通过下面的命令进行全局安装

npm install pm2 -g

进入工作目录,可以通过下面的命令来开启node进程，即使关闭编译器它也还在运行

pm2 start server\bin\www

这样就启动成功了，我们可以看到很多关于这个node进程的信息，并且最下面还可以键入其他的命令，一点都不冲突，关闭编译器后也可以在其他的命令行中输入相关命令查询这个进程状态（具体见pm2官方）。即使你有好几个node项目，你都可以同时开启，他会做统一管理。

![70 7][]

输入下面的命令就会停止相应的服务

pm2 stop server\bin\www

![70 8][]

通过pm2 log可以打印日志

\--------------------- 本文来自 Coding\_AlexH 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq\_41000891/article/details/82716900?utm\_source=copy

[70]: https://img-blog.csdn.net/20180915193641873?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDAwODkx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220509/60aa10fd9154447c8f3990f2fe362f5b.png
[70 2]: /images/20220509/351f76173be74a998b002e9cd808c305.png
[http_localhost_3000]: http://localhost:3000
[70 3]: /images/20220509/4e7f7dcbc45840f59edf93343cd99027.png
[70 4]: /images/20220509/ae09207826c8426ba4e0d617a01a6a6d.png
[70 5]: /images/20220509/bce32efae69f43a3b4ef16c2294241c7.png
[70 6]: /images/20220509/f88b85adc0b64896bf0cdbb33661e14d.png
[70 7]: /images/20220509/ef0738931a7f4997bf8f32e8f2e8c16a.png
[70 8]: /images/20220509/f5fd3966d74847898578a4189931784f.png