vue3+vite运行报错记录：error when starting dev server

最新推荐文章于 2025-07-04 15:57:14 发布
最新推荐文章于 2025-07-04 15:57:14 发布
阅读量6.4k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_58031521/article/details/130292326
在本地开发环境中，执行npminstall（npmi）后运行代码出现错误，但打包运行正常。错误根源在于vite-plugin-optimize-persist和vite-plugin-package-config两个插件的版本不兼容。解决方法是调整这两个插件的版本，确保它们可以协同工作，避免版本依赖问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景：拉完代码执行npm i后运行报错，打包运行代码没问题，说明是本地开发环境的问题。

完整报错信息：

原因：vite-plugin-optimize-persist和vite-plugin-package-config版本相互依赖

解决：

 

改为：

 

 

vue3+vite - 解决报错error when starting dev server: Error: Failed to resolve vue/compiler-sfc.（项目启动运行出错）
高级前端工程师
12-25 7779
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
vue3 - 报错error when starting dev serve: Error: Cannot find module ‘node:url‘（完美解决方法）
高级前端工程师
02-28 6356
vue3，vite，运行项目报错，npm run dev，vue3启动报错，vue3 Error: Cannot find module 'node:url'，vue3 error when starting dev serve，vue3 Failed to load config from 'xx'，报错解决方法，vue3如何解决运行出现报错，vue3安装依赖后运行报错如何解决，怎么处理vue3运行报错提示，vue报错，解决报错，终端提示错误，浏览器报错，在VUE3+vite项目run dev运行起不来报
error when starting dev server
weixin_52309490的博客
05-26 1万+
遇到这样的错误现将其他文件夹删除了只留一个文件 > dome@0.0.0 dev E:\实训\day14\dome > vite > html:E:/实训/day14/dome/src/views/home/my.vue:12:7: error: Multiple exports with the same name "default" 12 │ export default {} ╵ ~~~~~~~ html:E:/实训/day14
vite项目npm/npx——解决error when starting dev server:TypeError:crypto$2.getRandomValues is not a function
一个喜欢周五的前端
07-04 1735
1、卸载当前版本node，安装高版本node。2、nvm下载并切换为高版本node（推荐）查看node是否切换成功。
error when starting dev server:Error: Cannot find module ‘unplugin-auto-import/vite‘Require stack:
guapilixianghe的博客
03-23 1531
缺少东西了，重新 npm i 下载一下就行了。
使用vite报错：error when starting dev server:Error: Cannot find module ‘unplugin-vue-components/vite‘
wq123123423432的博客
07-01 6474
使用vite报错：error when starting dev server:Error: Cannot find module 'unplugin-vue-components/vite'
关于“error when starting dev server:Error: The package “@esbuild/win32-x64“ could not be found”的错误
yo_le的博客
07-26 3706
使用vite创建项目，启动dev时报错
vue3 - vite报错TypeError: crypto.hash is not a function（vue3+vite启动运行提示错误，项目无法启动且打包报错失败，详细解决排查方案教程）
最新发布
高级前端工程师
07-04 4517
vue3 vite 报错，vue3+vite启动报错：TypeError: crypto.hash is not a function，创建vue3+vite项目时报错TypeError: crypto.hash is not a function，如何解决这个问题，VUE3+VITE报错crypto.hash，vue3运行报错，vite运行报错，vue3打包报错，vite打包报错，vue3新建项目无法运行，vue3 vite创建项目直接报错了，node版本不兼容，修改了node版本还是不行，依旧报错，一直
failed to load config from F:\vue\vue3\project\vite.config.ts error when starting dev server解决方法
xugang666666的博客
10-31 4128
从上图能看现来我的node版本和npm 版本是不兼容的，所以我使用npm install npm@9.8.1 -g 命令进行降级，降到npm9.8.1这个版本。这个原因是因为node版本与npm版本不一致所导致,使用命令node -v查看node版本，npm -v查看npm版本。怎么分析版本是否一致？在这里我把node版本与npm版本兼容版本号给大家列出来。如果这里出现错误你降低的版本还是之前版本，那么就执行卸载。卸载后你之前所安装的版本就有了。好了，废话不多说直接开跑。
vite 启动报错：TypeError: crypto$2.getRandomValues is not a function
猿小白的博客
03-25 3909
error when starting dev server: TypeError: crypto$2.getRandomValues is not a function
TypeError: vite.createFilter is not a function
qq_41240287的博客
10-27 2777
因此，如果您只是安装 Vue/React 插件而不指定版本，它们会安装比您需要的新版本。Vite 刚刚发布了 v3，但 我们使用的是 v2。vite版本与安装的依赖版本不匹配。
error when starting dev server:Error: The package “@esbuild/win32-x64“ could not be found, and is n
weixin_57677300的博客
12-23 1万+
启动npm run dev时报错。 failed to load config from C:\Users\PC3803\Desktop\Vue3+TS\vue3_ts_cms\vite.config.ts error when starting dev server: Error: The package "@esbuild/win32-x64" could not be found, and is needed by esbuild. "--no-optional" or "--omit=option
【Vue】问题：TypeError: vite.createFilter is not a function
学无止境
10-25 3398
【Vue】问题：TypeError: vite.createFilter is not a function
failed to load config from 路径\vite.config.jserror when starting dev server:Error: Cannot find问题
ShanHey1Q1u的博客
09-18 9987
是因为node和npm版本号问题，可以使用nvm工具下载高版本的node切换过去就可以了，使用到16.14.2版本就可以正常下载依赖了。使用npm init vue@latest构建项目后，npm i下载依赖文件出现。
error when starting dev server:Error: Failed to resolve vue/compiler-sfc.
左不言的博客
02-10 7233
error when starting dev server: Error: Failed to resolve vue/compiler-sfc. @vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
vue3使用vite编译报错：Error: Cannot find module ‘node:fs‘
小马甲
11-12 2514
启动了vue3的一个项目，用的是vite打包编译，结果直接就出现下面这个报错。
Vue3 启动项目失败error when starting dev server: Error: listen EACCES: permission denied 127.0.0.1:80
beiback的博客
03-13 1万+
npm run dev 启动端口失败 Vue3 启动项目失败error when starting dev server: Error: listen EACCES: permission denied 127.0.0.1:80。
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'
运行vue失败error when starting dev server: TypeError: crypto$2.getRandomValues is not a function
02-21
### Vue 开发服务器启动时报 `crypto.getRandomValues` 错误分析 在使用 `npm init vue` 创建的新项目中，在执行 `npm run dev` 启动开发服务器时遇到了 `TypeError: crypto$2.getRandomValues is not a function` 的错误。此问题主要发生在 Node.js 较低版本环境中，特别是在 Node.js 16.x 或更低版本下运行 Vite 构建工具时。 #### 原因解析 该问题是由于 Vite 使用了 Web Crypto API 中的方法 `getRandomValues()`，而这些方法在较旧版本的 Node.js 中可能未被完全支持或实现方式不同所致[^3]。具体来说： - **Node.js 版本差异**：某些加密函数如 `randomUUID` 和 `getRandomValues` 在早期版本中的行为与现代标准不符。 - **依赖库冲突**：当构建工具（如 Vite）期望更高版本的 Node.js 提供的功能时，可能会引发此类类型错误。 #### 解决方案 针对上述情况提供了两种可行的解决方案来解决问题并保持项目的正常运作： ##### 方案一：升级 Node.js 至更新版本 将本地使用的 Node.js 升级到至少 v18 LTS 版本可以有效解决这一兼容性问题。新版本包含了完整的 Web Crypto API 支持以及更好的性能优化特性。 ```bash nvm install 18 nvm use 18 ``` ##### 方案二：调整 Vite 版本至较低稳定版 如果因为环境限制无法立即升级 Node.js，则可以选择降低 Vite 的版本号以匹配当前所用的 Node.js 版本。通过修改 `package.json` 文件指定合适的 Vite 版本范围，并锁定特定的小版本避免后续安装过程中自动更新引起新的不兼容问题。 ```json { "dependencies": { "vite": "^5.4.11" } } ``` 之后再次清理缓存并重新安装依赖项： ```bash rm -rf node_modules/ rm package-lock.json npm cache clean --force npm install ``` 最后重启开发服务验证修复效果： ```bash npm run dev ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值