2021.7.28

坑17（vue3、生命周期鉤子、導(dǎo)航守衛(wèi)、頁(yè)面刷新）：發(fā)現(xiàn)頁(yè)面刷新后在導(dǎo)航守衛(wèi)afterEach()中設(shè)置的頭部的面包屑、標(biāo)題、標(biāo)簽頁(yè)調(diào)整函數(shù)updateHeader()并未觸發(fā)，即刷新頁(yè)面無(wú)法觸發(fā)afterEach()，也就無(wú)法正確顯示刷新后頁(yè)面的頭部。

解決方法：在生命周期鉤子onMounted()中調(diào)用updateHeader()，該鉤子會(huì)在頁(yè)面刷新后觸發(fā)。以上導(dǎo)航守衛(wèi)和生命周期鉤子都寫(xiě)在setup()中。

注：vue3中，生命周期鉤子在setup()中使用，并接收一個(gè)回調(diào)函數(shù)作為參數(shù)。詳細(xì)可見(jiàn)參考文章或官方文檔。

setup(){function?updateHeader(){// 調(diào)整頁(yè)面頭部的面包屑、標(biāo)題、標(biāo)簽頁(yè)}// 頁(yè)面刷新時(shí)不會(huì)調(diào)用router.afterEach((to,from)=>{updateHeader()})//?頁(yè)面刷新時(shí)會(huì)調(diào)用onMounted(()=>{updateHeader()})}

參考： 如何在Vue3中使用生命周期函數(shù) - 知乎 (zhihu.com)

官方文檔： 生命周期鉤子 | Vue3中文文檔 - vuejs (vue3js.cn)和 組合式 API | Vue3中文文檔 - vuejs (vue3js.cn)

坑18（vue3、vue-devtools beta）：安裝vue-devtools到Chrome/Edge瀏覽器（Firefox可以直接下github的xpi文件安裝）。（成功可行的方法請(qǐng)看最后一段，及2021.8.13更新）

失敗經(jīng)歷：

1、github下載的壓縮包，main分支，yarn install成功，yarn run build / npm run build 均失敗。

2、新建一空文件夾，命令行npm install vue-devtools，將node_modules\vue-devtools\vender文件作為擴(kuò)展程序載入到瀏覽器Chrome/Edge，權(quán)限全開(kāi)；vender下manifest.json文件中"persistent"屬性置為true。啟用后效果：進(jìn)入vue寫(xiě)的網(wǎng)站（參考 哪些網(wǎng)站使用了vue？_冰雪為融的博客-CSDN博客_vue網(wǎng)站，ps：csdn新版博客主頁(yè)也是vue寫(xiě)的，但舊版不是），可以點(diǎn)亮圖標(biāo)，但自己運(yùn)行的網(wǎng)站始終為灰色，提示Vue.js not detected。

原因排查：下載版本不對(duì)，vue3對(duì)應(yīng)的vue-devtools應(yīng)該是6.0.0以上的beta版本。

繼續(xù)嘗試：

github下載最新的beta版安裝包，devtools-6.0.0-beta.15，yarn install，yarn build，報(bào)錯(cuò)（原因見(jiàn)及解決方法見(jiàn)后附的2021.8.13更新）：

lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'

lerna ERR! yarn run build stdout:

$ rm -rf ./build && cross-env NODE_ENV=production webpack --progress

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:

warning package.json: No license field

'rm' �����?����?���??���?�������

���������?���

error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'

lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.

error Command failed with exit code 1.

刪除yarn.lock，yarn init，yarn install，yarn build，依然失敗。

若成功，取packages\shell-chrome文件作為擴(kuò)展程序載入到瀏覽器Chrome/Edge。

（下載很慢可以考慮換源，參考 Electron安裝失敗_mocoe的專(zhuān)欄-CSDN博客）

注：之前下過(guò)一個(gè)6.0.0-beta.6版本沒(méi)報(bào)錯(cuò)，成功生成了shell-chrome文件，但運(yùn)行報(bào)錯(cuò)backend.js:3253 TypeError: api.on.visitComponentTree is not a function，暫未發(fā)現(xiàn)有阻礙/影響運(yùn)行。

最后成功的方法： Download Vue.js Devtools 6.0.0 beta 15 CRX File for Chrome - Crx4Chrome或 Vue.js Devtools_6.0.0beta15_chrome擴(kuò)展插件下載_極簡(jiǎn)插件 (zzzmh.cn)直接下載擴(kuò)展程序.crx文件安裝。連接是目前的最新版beta-6.0.0.15。

2021.8.13更新（成功bulid及使用）： 收到留言："devtools這個(gè)報(bào)錯(cuò)需要把 @vue\devtools和@vue-devtools\shell-chrome的build命令里面的rm -rf改成rimraf，windows下不能使用rm好像" 查了一下相關(guān)資料，認(rèn)為可行，值得一試。windows確實(shí)不能使用rm，參考：'rm' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序 或批處理文件。_今天不學(xué)習(xí)~明天變垃圾~-CSDN博客。rimraf參考： npm包--rimraf_丫丫的博客-CSDN博客_rimraf安裝 嘗試：（版本是devtools-6.0.0-beta.15） 首先安裝rimraf，npm install rimraf --save-dev，報(bào)錯(cuò)：npm ERR! RequestError: read ECONNRESET。查看源地址，npm config get registry，看到當(dāng)前源地址是https://registry.npmjs.org/。設(shè)置源地址為淘寶鏡像，npm config set registry https://registry.npm.taobao.org/。再次嘗試安裝rimraf，npm install rimraf --save-dev，成功。 之后，搜索rm -rf，可以找到一下兩個(gè)位置下的package.json： packages\shell-chrome\package.json packages\shell-electron\package.json 備份后，修改替換其中的rm -rf為rimraf，下方代碼以shell-chrome包中的package.json為例： //packages\shell-chrome\package.json //修改后 "scripts": {"build": "rimraf ./build && cross-env NODE_ENV=production webpack --progress" }, //修改前 "scripts": {"build": "rm -rf ./build && cross-env NODE_ENV=production webpack --progress" }, 最后，yarn install， yarn build，成功！！！ 取packages\shell-chrome文件作為擴(kuò)展程序載入到瀏覽器Chrome/Edge，可以使用。

by 莫得感情踩坑機(jī)(限定)

總結(jié)

以上是生活随笔為你收集整理的踩坑记6 vue3、生命周期钩子、vue-devtools beta的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。