背景

在開發(fā) Vue 項(xiàng)目（特別是使用 Webpack/Vue CLI）時(shí) 或者從 Github 導(dǎo)入一個(gè)老項(xiàng)目時(shí)，所有依賴安裝完成，然后準(zhǔn)備運(yùn)行項(xiàng)目的時(shí)候，點(diǎn)擊起飛，然后就翻車了：

ERROR  Failed to compile with 1 error

This dependency was not found:

* regenerator-runtime/runtime in ./node_modules/.../index.vue?vue&type=script&lang=js

To install it, you can run: npm install --save regenerator-runtime/runtime

出現(xiàn)問(wèn)題的主要原因是因?yàn)椋捍a中使用了 async/await 異步請(qǐng)求，或者使用了 Generator 函數(shù)，保存代碼或運(yùn)行的時(shí)候終端會(huì)爆出上面的紅色錯(cuò)誤。

如果按照錯(cuò)誤提示直接運(yùn)行 npm install --save regenerator-runtime/runtime，會(huì)發(fā)現(xiàn)——根本行不通！ npm 會(huì)說(shuō)這是一個(gè)無(wú)效的包名。

快速解決方案（3步搞定）

遇到這個(gè)問(wèn)題，核心原因是項(xiàng)目使用了現(xiàn)代語(yǔ)法，但缺少了運(yùn)行時(shí)支持。請(qǐng)按以下步驟操作：

第一步：安裝正確的依賴包

注意：包名是 regenerator-runtime，不要帶后面的 /runtime。

# 使用 npm
npm install --save regenerator-runtime

# 或者使用 yarn
yarn add regenerator-runtime

第二步：在入口文件中引入（可選）

雖然有些 Babel 配置會(huì)自動(dòng)注入，但為了保證 100% 的兼容性（特別是針對(duì)老舊瀏覽器），建議顯式引入。
打開項(xiàng)目的 入口文件（通常是 src/main.js 或 src/main.ts），在最頂部添加：

// src/main.js
import 'regenerator-runtime/runtime'; // ?? 加上這一行

import Vue from 'vue';
import App from './App.vue';
// ...其他代碼

第三步：重啟開發(fā)服務(wù)器

這一步至關(guān)重要！修改依賴和入口文件后，必須重啟服務(wù)才能生效。

npm run serve
# 或
yarn serve

此時(shí)，報(bào)錯(cuò)應(yīng)該已經(jīng)消失， async/await 又能愉快地奔跑了。

深度解析：為什么要裝這個(gè)包？

當(dāng)時(shí)也很疑惑：“寫的只是普通的 JavaScript，為什么要裝這么奇怪的東西？”

經(jīng)過(guò)查找資料發(fā)現(xiàn)還是有歷史包袱的：

1. 瀏覽器的“代溝”

async/await 是 ES7 的語(yǔ)法，Generator 是 ES6 的語(yǔ)法。雖然現(xiàn)代瀏覽器（Chrome, Edge）已經(jīng)支持，但為了兼容舊版瀏覽器（如 IE11）或某些移動(dòng)端 WebView，需要工具將代碼“翻譯”成老版本瀏覽器能看懂的 ES5 代碼。

2. Babel 的魔法與代價(jià)

Babel 就是這個(gè)翻譯官。當(dāng)它把 async function 翻譯成 ES5 時(shí)，它無(wú)法直接用簡(jiǎn)單的語(yǔ)法替代，而是將其轉(zhuǎn)換成了一個(gè)依賴 狀態(tài)機(jī) 的復(fù)雜函數(shù)。這個(gè)轉(zhuǎn)換后的代碼依賴一個(gè)全局輔助對(duì)象：regeneratorRuntime。

3. 缺失的一環(huán)

Webpack 打包時(shí)，發(fā)現(xiàn)代碼里用到了 regeneratorRuntime，但找不到它的定義。

• 報(bào)錯(cuò)原因： 用了高級(jí)語(yǔ)法 -> Babel 轉(zhuǎn)譯 -> 生成了對(duì) regeneratorRuntime 的引用 -> 項(xiàng)目里沒(méi)裝這個(gè)庫(kù) -> 報(bào)錯(cuò)。
• 誤導(dǎo)性提示： 報(bào)錯(cuò)提示中的 regenerator-runtime/runtime 實(shí)際上是指該包內(nèi)部的一個(gè)文件路徑，而不是包名本身。

進(jìn)階排查：如果還是報(bào)錯(cuò)？

如果執(zhí)行了上述步驟依然無(wú)效，請(qǐng)嘗試以下方法：

1. 清除緩存（最常見(jiàn)有效）
   Webpack 或 Babel 的緩存問(wèn)題。

   # 刪除 node_modules 下的緩存
   rm -rf node_modules/.cache
   
   # 或者直接刪除整個(gè) node_modules 重裝
   rm -rf node_modules package-lock.json
   
   npm install
   

2. 檢查 Babel 配置
   確保 babel.config.js 配置正確。如果使用的是 Vue CLI，通常默認(rèn)配置已經(jīng)足夠，但如果自定義了配置，請(qǐng)確保包含 @vue/app 或 @babel/preset-env。

未來(lái)趨勢(shì)：擁抱 Vite（未來(lái)的選擇）

直接鳥槍換炮。

為什么現(xiàn)代項(xiàng)目（Vue 3 + Vite）很少遇到這個(gè)問(wèn)題？

• Webpack (舊時(shí)代)： 為了兼容性，默認(rèn)背負(fù)沉重的 Babel 轉(zhuǎn)譯包袱。
• Vite (新時(shí)代)： 在開發(fā)環(huán)境利用瀏覽器原生的 ES Modules (ESM) 能力。瀏覽器直接讀懂 async/await，根本不需要 Babel 把它轉(zhuǎn)譯成復(fù)雜的 regenerator 狀態(tài)機(jī)。

建議：

• 維護(hù)老項(xiàng)目： 使用本文提供的 npm install 方案，穩(wěn)妥、成本低。
• 開啟新項(xiàng)目： 強(qiáng)烈建議使用 Vite。它不僅啟動(dòng)速度秒殺 Webpack，而且能從這些繁瑣的 Polyfill 配置中解脫出來(lái)。

總結(jié)

這類報(bào)錯(cuò)是前端工程化中典型的“環(huán)境配置”問(wèn)題。

少寫 BUG，少掉頭發(fā)，阿門?。。?/p>

到此這篇關(guān)于Vue項(xiàng)目中“regenerator-runtime/runtime“缺失報(bào)錯(cuò)問(wèn)題終極解決指南的文章就介紹到這了,更多相關(guān)Vue “regenerator-runtime/runtime“缺失報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論