前端开发:Node版本引起的报错问题

简介: 在前端开发过程中会遇到各种坑,尤其是对于新入行的前端新手来说更是如此,稍有不慎就会掉入连环坑中。作为前端入门级开发者来说,各种基础问题都能让在开发过程中引起卡壳情况,那么本篇博文就来分享一下前端开发新手常遇到的经典问题,由node版本不一致造成的程序报错问题。

前言

在前端开发过程中会遇到各种坑,尤其是对于新入行的前端新手来说更是如此,稍有不慎就会掉入连环坑中。作为前端入门级开发者来说,各种基础问题都能让在开发过程中引起卡壳情况,那么本篇博文就来分享一下前端开发新手常遇到的经典问题,由node版本不一致造成的程序报错问题。

由Node版本引起的报错问题也是很常见,尤其是电脑上安装的高版本Node,要运行低版本开发的项目,就会报错,这就涉及到Node版本的升级和降级。Node降低版本或者升级版本,使用nvm来管理Node版本,nvm的安装在前几篇博文里面已经有详细讲解,本篇博文只是来分享一下在运行别的项目的时候,由于Node版本不同引起的项目报错问题,具体的报错如下所示:

Cheng$ npm run dev
> ​​wechatui@3.0.0​​ dev /Users/Cheng/Downs/weUI
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
35% building modules 215/266 modules 51 active ...g/Downs/weUI/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
94% asset optimization                                                                 
ERROR  Failed to compile with 1 errors                                                                     4:50:02 PM
error  in ./src/util/loader.js
Syntax Error: Unexpected token (3:8)
  1 | const loader = {
  2 |     view: file => () =>
> 3 |         import ('@/views/' + file + '.vue'),
    |         ^
  4 |     component: file => () =>
  5 |         import ('@/components/' + file + '.vue')
  6 | };
@ ./src/components/index.js 3:0-35
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:87 webpack/hot/dev-server babel-polyfill ./src/main.js

看到上述错误是不是觉得很无厘头,定位到具体的文件里面,代码写的没有问题,但是依然报错,那么就是Node版本不一致引起的问题,也就是电脑运行项目的Node版本和项目开发时候的Node版本不一致,造成项目运行报错,解决方法很简单,就是根据实际场景来对Node的版本进行升降操作,从而适应达到项目可运行的版本即可。

1.png

下面再来大概讲解一下node的安装流程,方便查阅使用。在项目开发过程中,可能需要经常切换node版本来应对不同的开发环境,所以需要经常使用不同版本的node,具体步骤如下所示:

2.png


3.png

一、安装npm插件n ,通过n模块来管理node版本

1、全局安装n模块的命令行:

npm instlal -g n

2、安装当前稳定版本的命令行:

n stable 或者 sudo n stable

3、安装最新版本的命令行:

n latest或者sudo n latest

4、安装指定版本的node命令行:

n v8.16.0

5、卸载指定的node版本命令行:

n rm v8.16.0

二、使用nvm管理node版本

1、安装nvm的命令行:

brew install nvm

2、使用nvm安装node版本的命令行:

安装最新版本的命令行:

nvm isntall node

安装指定版本的命令行:

nvm install 8.16.0

3、查看所有版本的命令行:

nvm ls

4、切换node版本的命令行:

使用最新版本的命令行:

nvm use node

使用指定版本的命令行:

nvm use 10.16.2

eg:如果电脑上一个项目使用的是node@5.13.0,另外一个新项目使用的是node@9.16.0,

那么需要先安装node@9.16.0:nvm install 9.16.0,然后再使用:nvm use 8.16.0 即可。

最后

通过上面的讲解,想必读者对于在前端开发中Node版本引起的报错问题的了解,以后再遇到类似的就迎刃而解,望周知,这里不再赘述。以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

相关文章
|
7月前
|
数据库
【YashanDB 知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
**问题现象**:在共享集群部署数据库时,遇到错误 YAS-05721,提示节点名称无效。原因是操作系统主机名不符合服务器名称要求(字母、数字、下划线组成,长度4-64字符,以字母开头)。**解决办法**:1. 部署时加--ignore-hostname 参数,由 yasboot 自动生成合法名称;2. 修改操作系统 hostname 符合要求。
|
6月前
|
数据库
【YashanDB知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
【YashanDB知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
|
10月前
|
前端开发
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
408 61
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
4911 24
|
7月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
385 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5月前
|
JavaScript 算法 前端开发
nodejs18版本 npm run dev失败
在使用若依框架运行 `npm run dev` 时,若卡在 95% 并报错,通常是 Node.js 17+ 与 Webpack 的兼容性问题。原因是 OpenSSL 3 的加密算法变化导致依赖冲突。解决方法:Windows 下运行 `set NODE_OPTIONS=--openssl-legacy-provider`,macOS/Linux 使用 `export NODE_OPTIONS=--openssl-legacy-provider`,然后重新启动开发服务即可。此设置让 Node.js 启用旧版加密支持,恢复正常构建流程。
360 0
|
7月前
|
数据库
【YashanDB 知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
在共享集群部署数据库时,遇到错误“YAS-05721 invalid input parameter, reason: node name invalid”。原因是操作系统的主机名不符合服务器名称要求(需由字母、数字、下划线组成,以字母开头,长度4-64字符)。解决办法:1. 部署时加--ignore-hostname参数,由yasboot生成合规名称;2. 修改操作系统hostname以符合要求。
|
9月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
575 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
8月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
156 10
|
9月前
Node安装版本低于工程版本时打包绕过校验
在开发中,若本地Node版本低于项目配置要求,导致打包报错(如图所示),可在不变更本地环境的情况下,通过在执行`npm run build`前输入命令`set NODE_OPTIONS=--openssl-legacy-provider`来绕行此问题,确保构建顺利进行。
468 10