vue3+vite项目，安装依赖运行报错“failed to load config from xxx，TypeError: vite.createFilter is not a function”

已于 2022-11-22 14:40:53 修改
阅读量3.4w 收藏 22
点赞数 11
文章标签： javascript vue.js 前端
于 2022-08-07 22:01:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_52900946/article/details/126217126
版权

vite Vue 错误修复 版本不匹配 Node.js
关键词由优快云通过智能技术生成

问题

    今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示TypeError: vite.createFilter is not a function在这里插入图片描述

错误原因

    vite版本与安装的依赖版本不匹配
    近期vite3发布，但我们使用的还是v2，所以安装依赖的时候默认安装的是最新版本，这是就会出现版本和安装的依赖不匹配的问题

    需要注意的还有一个点就是Vite 不再支持 Node 12 / 13 / 15，因为vite已经进入了 EOL 阶段。现在必须使用 Node 14.18+ / 16+ 版本

解决方法

    ① 升级到vite3

npm install -D vite@^3.0.0
pnpm add -D vite@^3.0.0

    ②降低插件版本

npm i @vitejs/plugin-vue@2.3.3

参考：https://blog.youkuaiyun.com/weixin_50763257/article/details/126061965
           https://laracasts.com/discuss/channels/vite/vitecreatefilter-is-not-a-function

Vue3 - 安装依赖报错 ERESOLVE unable to resolve dependency tree | While resolving: x（vue3 install 安装项目依赖报错）
王二红
04-27 4392
vue3，vite，安装依赖报错，vue3装包失败，vue3执行install安装依赖包时报错，npminstall，yarninstall，如何解决vue3报错，vue3项目装不上依赖怎么办，npmERR!codeERESOLVE，npmERR!ERESOLVEunabletoresolvedependencytree，npmERR!Whileresolving，无法解决怎么办，vue3一直报错，装项目依赖报错，详细解决教程，vue3终端报错，强力解决方法，解决方法，项目没办
vue3+vite - 报错TypeError: Failed to fetch dynamically imported module: xx，vue3项目报错无法获取动态导入的模块，vite报错！
高级前端工程师
07-06 9301
vue3，vite，vite-plugin-vue，nuxt3，报错，TypeError: Failed to fetch dynamically imported module，无法获取动态导入的模块，vue3打包报错，vue3编译运行报错，如何解决错误，vite build打包以后报错Failed to fetch，Vue3报错详细解决，Vue3+TS错误解决，换浏览器，清缓存，退出登录重新登陆，文件路径没写对，要么是没加组件名的后缀vue，路径写错了，加了setup语法糖导致的这个报错，eslint，
运行安装vue3+vite+Ts项目报错，无法加载vite.config.ts文件（failed to load config from D:\XXX\vite.config.ts）
weixin_48117629的博客
03-07 3242
git 上面拉别人的vue3+vite+Ts项目，安装依赖成功之后运行，出现报错。
清理垃圾后导致Vue项目报错：failed to load config
qq_31283125的博客
02-14 387
删除项目中的node_modules目录，重新执行。可能是使用清理软件删除了某些问题。RuoYi-Vue3前端项目执行。
vue3运行项目出错 failed to load config from D:\xm\demo\vite.config.ts
qq_45527370的博客
03-22 815
vue3运行项目出错 failed to load config from D:\xm\demo\vite.config.ts error when starting dev server:
【Vue】问题：TypeError: vite.createFilter is not a function
学无止境
10-25 3361
【Vue】问题：TypeError: vite.createFilter is not a function
关于vite+vue3项目无法启动问题 failed to load config from C:\Users\myname123\Desktop\xxxxx\vite.config.ts
m0_68630350的博客
10-09 4476
关于vite+vue3项目无法启动问题 failed to load config from C:\Users\myname123\Desktop\xxxxx\vite.config.ts
TypeError: vite.createFilter is not a function
qq_41240287的博客
10-27 2758
因此，如果您只是安装 Vue/React 插件而不指定版本，它们会安装比您需要的新版本。Vite 刚刚发布了 v3，但 我们使用的是 v2。vite版本与安装的依赖版本不匹配。
failed to load config from D\...\...vite.config.js错误
m0_47814717的博客
09-13 1万+
出现 failed to load config from D\...\...vite.config.js 错误，通常意味着 Vite 无法正确加载配置文件。这可能是由于配置文件的路径、语法错误或依赖项缺失导致的问题
vite+vue3项目中报错：TypeError: Promise.allSettled is not a function
蜡笔小新星的博客
11-09 2006
在Vite+Vue3项目中遇到“TypeError: Promise.allSettled is not a function”错误，通常意味着你的代码试图调用方法，但当前运行的JavaScript环境不支持这个方法。是ECMAScript 2020（ES11）中引入的一个新特性，它返回一个在所有给定的promise都已经fulfilled或rejected之后解析的promise，并且结果数组中的每个元素都描述了对应的promise是如何结束的（fulfilled或rejected，以及相应的值或原因）
vite 启动报错：TypeError: crypto$2.getRandomValues is not a function
猿小白的博客
03-25 2386
error when starting dev server: TypeError: crypto$2.getRandomValues is not a function
HBuilder创建uniapp,Vue3项目版本报错failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\
m0_60474123的博客
04-13 1010
HBuilder创建uniapp,Vue3项目版本报错报错信息：failed to load config from E:\Hbuilder\HBuilderX\plugins\uniapp-cli-vite\vite.config.js 16:30:52.972 error when starting dev server: 16:30:52.983 TypeError: uni is not a function
vue3+vite - 解决报错error when starting dev server: Error: Failed to resolve vue/compiler-sfc.（项目启动运行出错）
高级前端工程师
12-25 7428
vue3，vite，运行报错，error when starting dev server，Error: Failed to resolve vue/compiler-sfc.，vite项目运行出错，vue3启动报错，npm run dev，vue3+vite启动项目报错，yarn dev，安装项目依赖后运行报错，@vitejs/plugin-vue，vue3运行前端报错：error when starting dev server，使用vite创建项目，启动dev时报错，更新版本也不行，重新安装insta
vite.createFilter is not a function 问题解决
一缕阳光@的博客
07-29 1万+
vite.createFilter is not a function 问题解决
【Error】failed to load config from D:\Users\MXIN\IdeaProjects\xxx\vite.config.ts error when starting
m0_64210833的博客
12-14 4270
确保 Vite 已安装： 确保你的项目中已经安装了 Vite，并且版本是兼容的。在项目根目录下执行以下命令安装 Vite
vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module ‘node:path‘
热门推荐
weixin_55088768的博客
12-13 4万+
vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module 'node:path'
vite项目在jenkins自动打包报错：failed to load config from ../vite.config.js You installed esbuild on
清风明月的博客
04-11 2万+
vite项目在jenkins自动打包报错找不到esbuild-linux-64 在window环境开发用的找不到esbuild-windows-64，在linux环境构建需要使用esbuild-linux-64，找不到esbuild-linux-64就会报错 实际报错： error during build: 11:21:11 Error: 11:21:11 You installed esbuild on another platform than the one you're currently us
解决报错：failed to load config from /Users/stephen/code/my-vue3-project/vite.config.js
qq_38969618的博客
05-23 6559
pnpm add @esbuild/darwin-x64@0.16.17 -D
failed to load config from 路径\vite.config.jserror when starting dev server:Error: Cannot find问题
ShanHey1Q1u的博客
09-18 9825
是因为node和npm版本号问题，可以使用nvm工具下载高版本的node切换过去就可以了，使用到16.14.2版本就可以正常下载依赖了。使用npm init vue@latest构建项目后，npm i下载依赖文件出现。
运行vue3项目报错TypeError: crypto$2.getRandomValues is not a function
最新发布
04-05
<think>好的，我现在需要解决用户在运行Vue3项目时遇到的TypeError: crypto$2.getRandomValues is not a function错误。根据用户提供的引用信息，我需要先分析问题根源，然后整理可行的解决方案。 首先，用户提到了多个引用，其中引用[4]和[5]指出该错误与Node.js版本过低有关，特别是当使用Node 16时会出现此问题，而升级到Node 18或更高版本可以解决。同时，引用[3]和[5]提到Vite版本可能存在兼容性问题，建议降级Vite到5.x版本，尤其是在需要保持Node 16的情况下。 接下来，我需要确认问题的根本原因。根据错误信息，crypto.getRandomValues是一个用于生成随机值的Web API，可能在Node环境中某些版本不支持或者存在polyfill缺失。Vite在构建时可能依赖了Node.js的crypto模块，而旧版本的Node（如16）可能没有正确支持，导致该错误。 解决方案方面，用户有两种选择：升级Node版本或降级Vite版本。如果用户的生产环境（如流水线）使用Node 16，可能需要降级Vite到兼容版本，并锁定依赖版本以避免自动升级。另外，推荐使用nvm管理Node版本，方便切换。 还需要注意package.json和package-lock.json中的版本不一致问题，如引用[3]提到的，同事可能使用了更高版本的Vite，导致lock文件中版本与实际配置不符。因此，确保团队中使用相同的Node版本和依赖版本管理非常重要。 最后，用户可能需要指导如何具体操作，比如如何降级Vite，如何升级Node，以及如何清理npm缓存等步骤。同时提醒用户检查项目配置和团队协作中的版本控制问题，避免未来再次出现类似问题。</think>### 解决方案：`TypeError: crypto$2.getRandomValues is not a function` #### 问题根源 此错误是由于以下两种原因之一导致： 1. **Node.js 版本过低**（如 Node 16），无法兼容 Vite 最新版本对 `crypto.getRandomValues` 的调用[^4][^5]。 2. **Vite 版本过高**（如 ≥6.0.0），与低版本 Node.js 不兼容[^3][^5]。 --- #### 分步解决方案 ##### 方案一：升级 Node.js 版本（推荐） 1. **安装 Node.js 18+** 使用 [nvm](https://github.com/nvm-sh/nvm) 管理 Node 版本： ```bash nvm install 18 nvm use 18 ``` 2. **清理并重新安装依赖** ```bash rm -rf node_modules package-lock.json npm install npm run dev ``` ##### 方案二：降级 Vite 版本（兼容 Node 16） 1. **修改 `package.json`** 将 Vite 版本锁定为 5.x（例如 5.4.11）： ```json { "devDependencies": { "vite": "5.4.11" } } ``` 2. **清理并重新安装依赖** ```bash rm -rf node_modules package-lock.json npm install npm run dev ``` ##### 附加建议 - **团队协作规范**：统一团队内的 Node.js 版本（建议 ≥18）和 Vite 版本，避免因 `package-lock.json` 差异导致问题[^3]。 - **Vite 版本锁定**：在 `package.json` 中使用固定版本号（如 `5.4.11`），而非语义化版本范围（如 `^5.4.11`）。 --- #### 原理解释 - **Node.js 版本问题**：Vite 6+ 依赖的加密库在 Node 16 中未被完整支持，而 Node 18+ 原生提供了 `crypto.getRandomValues` 的兼容实现[^4]。 - **Vite 版本兼容性**：Vite 5.x 对 Node 16 的兼容性更好，通过降级可绕过加密 API 的调用问题[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值