前端开发: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”,欢迎关注!

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
2月前
|
Web App开发 缓存 前端开发
拿下奇怪的前端报错(六):多摄手机webrtc拉取视频流会导致应用崩溃,从而无法进行人像扫描
本文介绍了一种解决手机摄像头切换导致应用崩溃的问题的方法。针对不支持facingMode配置的四摄手机,通过缓存和序号切换的方式,确保应用在特定设备上不会频繁崩溃,提升用户体验。
|
2月前
|
前端开发 JavaScript Docker
拿下奇怪的前端报错(五):SyntaxError: Unexpected token ‘??=‘或‘xxx‘ - 基于容器搭建开发环境或许是更好的选择
在前端开发中,同时维护多个项目时可能会遇到不同Node.js版本的问题。低版本Node.js可能导致依赖无法安装或启动失败,而高版本Node.js则可能引起第三方库的兼容性问题。推荐使用Docker搭建独立的开发环境,以避免版本不一致带来的困扰。
670 1
|
2月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
112 1
|
28天前
|
JavaScript Linux iOS开发
详解如何实现自由切换Node.js版本
不同的项目中需要使用不同版本的 Node.js,有时旧项目需要旧版本,而新项目则可能依赖最新的 Node.js 版本
30 0
|
2月前
|
JavaScript 开发工具 git
已安装nodejs但是安装hexo报错
已安装nodejs但是安装hexo报错
33 2
|
2月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)
|
2月前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
2月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
806 0