vscode运行vue项目需要配置什么node.js（vscode搭建vue）

今天给各位分享vscode运行vue项目需要配置什么node.js的知识，其中也会对vscode搭建vue进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、VSCode Node.js 调试配置 (npm 脚本启动)
• 2、在 VS Code 中调试vue项目
• 3、VSCode调试vue项目
• 4、vue项目要部署在服务器上，那么服务器需要安装node.js环境吗？
• 5、vue为什么需要nodejs 的环境
• 6、如何在vscode中使用nodejs

VSCode Node.js 调试配置 (npm 脚本启动)

相当于直接使用 node 命令，用 npm run script 脚本 来启动 Node.js 程序是更为常见的场景，比如当目标是运行一个应用。

假设项目的 package.json 有一个用来调试的 debug 脚本：

我们要怎么启动项目的跟踪调试呢？

文档指路 ➡️ 【Node.js 调试入门】 、 【VSCode 中的 Node.js 调试】 、 【Launch 对 npm 及其他工具的配置支持】

VS Code 支持两种核心调试模式 Launch 和 Attach ，Launch 方式是直接以 debug 模式启动应用，并为我们自动添加一个调试器；而 Attach 方式则是将 VSCode 调试器连接到已经运行中的应用程序或进程。我们这里用的是 Launch 方式。

在终端运行：

或点击VSCode 的小甲虫图标：

上面蓝色位置圈错了，应该是第一个 Node.js。

VSCode 十分智能，预设了很多针对不同需求的启动配置：

让我们来做进一步的修改：

之前那个启动配置项可以删除，留下这个需要的即可。

我们将 console 属性 设置为外部终端，我们启动调试时 VScode 就会自动打开下图中对应的终端(根据操作系统)。可以根据个人使用习惯，自定义用什么终端 (比如我在 VSCode 设置的 Terminal › External: Osx Exec，从默认的改为了 iTerm2)。

别忘了先把我们的脚本加上端口

在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点

5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。

遇到的问题：

官网中的launch.json配置中"url": " "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：

在 VS Code 中调试：

VSCode调试vue项目

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为：

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：

进入Debugger视图，添加Chrome配置，将内容替换成以下内容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。

vue项目要部署在服务器上，那么服务器需要安装node.js环境吗？

最好是安装一个。

1.如果你仅仅是打包好的vue相机，那么要看服务端使用的是什么语言，如果是node的话，肯定要安装node环境的，但是如果不是node，那么就没有必要了。

2.如果你想在服务端跑vue的项目，也就是在远程端做开发工作，那么肯定是要安装node的，毕竟vue开发环境需要node。

基本上服务端也就这两种需求，node包其实很小，安装一个也不费事，还可以方便开发，我觉得在远程端按一个最好。

vue为什么需要nodejs 的环境

一、JavaScript

传统的JavaScript是运行在浏览器上的，因为浏览器的内核分为两个部分

二、什么是Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运行在服务端的JavaScript。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

综上所述，vue.js 是通过 webpack来打包，而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vue.js 还需要安装nodejs环境。

将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上，访问页面可以正常响应逻辑。这时跟nodejs没有任何关系，服务器又不是nodejs在担当，而是nginx。如果你用nodejs来部署服务器，则需要在目标机上安装nodejs.

简单的说：你既可以开发nodejs的服务程序，亦可以用基于nodejs的npm webpack来打包 目标前端页面。vue.js 使用webpack来打包，故而需要nodejs环境。

参考文章

如何在vscode中使用nodejs

一、使用Express创建项目[这两步都在dos 模式下执行]

1,安装全局的Express！(已安装请忽略)

npm install -g express

2,创建项目

创建项目（创建文件夹名称ExpressApp）

express ExpressApp

小插曲：如果你习惯了Linux下的环境，你可以在自己电脑上安装cmder(不知道是什么东西，请自行百度),这个命令行工具排版漂亮，不像微软的dos 那么枯燥!我用的是Mini版本，如果你想体验linux下的全部功能，可以下载full版本。

3，下载第三方包

（1）cmd命令行切换到项目目录

cd d:\nodejs\ExpressApp

（2）根据需要编辑package.json，运行如下指令安装第三方包

npm install

在项目目录下node_modules可见安装好的第三方包

ExpressApp

|– node_modules

（3）运行项目

npm start

输出如下：

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp

node ./bin/www

注：npm start指令会自动执行node ./bin/www

在浏览器中输入，可访问Express欢迎页面

二、使用VSCode开发Nodejs

1、VSCode打开Nodejs

code d:\nodejs\ExpressAppcode.

注：在当前项目下创建ExpressApp.bat，输入“code .”即可，下次直接此文件直接使用VSCode打开Nodejs项目

2、添加智能提示

VSCode打开Nodejs项目，默认是没有智能提示。

（1）使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件，VSCode中打开时有智能

全局安装tsd（如已安装忽略）

npm install -g tsd

下载所需的组件提示（以下载node、express、requirejs提示为例）

tsd query node --action installtsd query express --action installtsd install require

注：

①多个提示组件在query参数后可以空格分隔简写为tsd query node express –action install

②组件会项目目录下添加typings文件夹

|– typings

|– node

|– express

|– require

（2）添加js文件引用的智能提示

假如在文件引用另外一个文件common.js时，文件头添加如下

{ // See // for the documentation about the jsconfig.json format "compilerOptions": { "target": "es6", "module": "commonjs", "allowSyntheticDefaultImports": true }, "exclude": [ "node_modules", "bower_components", "jspm_packages", "tmp", "temp" ]}

（小提示，如果你引入了rquire，那么你的编辑器右下方会显示一个“灯泡”的提示，你只要点灯泡就不用自己苦逼的写这个配置文件了）

此配置表示代码服从ES5标准并使用commonjs规范，发VScode下有此配置之后，可以实现在文件中对require引用js文件的智能提示。（我测试时无此配置也会有智能提示，不清楚什么原因）

vscode运行vue项目需要配置什么node.js的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vscode搭建vue、vscode运行vue项目需要配置什么node.js的信息别忘了在本站进行查找喔。