vue3.0运行npm run dev报错Cannot find module node:url

 更新时间:2023年10月25日 15:28:23   作者:baorant在写代码  
本文主要介绍了vue3.0运行npm run dev报错Cannot find module node:url,因为使用的node版本是14.15.1低于15.0.0导致,具有一定的参考价值,感兴趣的可以了解一下

问题背景

近期用vue3.0写项目,npm init vue@latest —> npm install 都正常,npm run dev的时候报错如下:

failed to load config from F:\code\testVue\vue-demo\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:url'
Require stack:
- F:\code\testVue\vue-demo\vite.config.js
- F:\code\testVue\vue-demo\node_modules\vite\dist\node\chunks\dep-bb8a8339.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)

问题分析

因为使用的node版本是14.15.1低于15.0.0导致,安装node版本等于或者大于15.0.0版本,然后npm run dev即可。

问题解决

不同的环境,对nodejs版本的要求不一样,我们可以使用nvm工具,管理和切换node.js的版本。

(1)nvm下载:https://nvm.uihtm.com/

(2)nvm命令提示

nvm arch:显示node是运行在32位还是64位。
nvm install <version> [arch] :安装node, version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本,默认是系统位数。可以添加--insecure绕过远程服务器的SSL。
nvm list [available] :显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls。
nvm on :开启node.js版本管理。
nvm off :关闭node.js版本管理。
nvm proxy [url] :设置下载代理。不加可选参数url,显示当前代理。将url设置为none则移除代理。
nvm node_mirror [url] :设置node镜像。默认是https://nodejs.org/dist/。如果不写url,则使用默认url。设置后可至安装目录settings.txt文件查看,也可直接在该文件操作。
nvm npm_mirror [url] :设置npm镜像。https://github.com/npm/cli/archive/。如果不写url,则使用默认url。设置后可至安装目录settings.txt文件查看,也可直接在该文件操作。
nvm uninstall <version> :卸载指定版本node。
nvm use [version] [arch] :使用制定版本node。可指定32/64位。
nvm root [path] :设置存储不同版本node的目录。如果未设置,默认使用当前目录。
nvm version :显示nvm版本。version可简化为v。

(3)安装node.js版本

1)nvm list available 显示可下载版本的部分列表

2)nvm install 16.19.0 安装指定版本(nvm install latest安装最新版本 )

注意:命令行切换(注意:请切换国内镜像后再安装node版本,否则会很慢)
阿里云镜像

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

3)安装完成后,查看已安装版本

nvm list

4)切换node版本

nvm use 16.19.0

3)重新运行npm run dev,成功运行vue3项目

到此这篇关于vue3.0运行npm run dev报错Cannot find module node:url的文章就介绍到这了,更多相关vue3.0运行npm run dev报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中style设置scoped后部分样式不生效的解决

    vue中style设置scoped后部分样式不生效的解决

    这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • vue如何批量引入组件、注册和使用详解

    vue如何批量引入组件、注册和使用详解

    这篇文章主要给大家介绍了关于vue如何批量引入组件、注册和使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue3的ref,computed,reactive和toRefs你都了解吗

    vue3的ref,computed,reactive和toRefs你都了解吗

    这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue3 动态绑定背景图片方法示例

    vue3 动态绑定背景图片方法示例

    这篇文章主要为大家介绍了vue3动态绑定背景图片实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 使用生成条形码并打印和vue-print-nb以及报错问题的解决

    使用生成条形码并打印和vue-print-nb以及报错问题的解决

    在TypeScript项目中,正确安装vue3-print-nb并配置env.d.ts声明模块,添加tsconfig.json的include路径,确保全局挂载以实现条形码和批量打印功能
    2025-07-07
  • Vue中v-for的数据分组实例

    Vue中v-for的数据分组实例

    下面小编就为大家分享一篇Vue中v-for的数据分组实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 基于Vue3定制复杂组件滚动条的实现

    基于Vue3定制复杂组件滚动条的实现

    这篇文章主要介绍了如何利用vue3定制复杂组件的滚动条,文中通过示例代码讲解详细,需要的朋友们下面就跟随小编来一起学习学习吧
    2023-04-04
  • vue实现tab切换的放大镜效果

    vue实现tab切换的放大镜效果

    这篇文章主要为大家详细介绍了vue实现tab切换的放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue 事件的$event参数=事件的值案例

    Vue 事件的$event参数=事件的值案例

    这篇文章主要介绍了Vue 事件的$event参数=事件的值案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01

最新评论