前言：在開啟Vue學習之旅時，遇到問題兩個問題，第一添加不上vue devtools擴展工具，第二添加完成后，F12不顯示Vue圖標。查閱了很多博客，自己解決了問題，故寫此博客記錄。如果你遇到和我一樣的問題，希望可以幫到你。

目錄

1、vue devtools 擴展程序添加

2、成功添加擴展程序，但在F12沒有出現Vue圖標

分析問題

解決問題

3、總結

---

1、vue devtools 擴展程序添加

需要去谷歌商城下載，不過需要翻墻

我找了文件，親測可用，鏈接永久有效！！！

連接我放下面了：

鏈接：https://pan.baidu.com/s/18yS1GYfjwvwMleYzyuJ1cA?pwd=MRJJ?
提取碼：MRJJ?

將擴展程序拖到這里，然后重啟電腦！！！（我當時沒有重啟，添加后還是沒有看到添加擴展的程序），打開引入vue的程序，Console輸入Vue，如下圖所示，表示已經將擴展程序添加好了。開心！！！

2、成功添加擴展程序，但在F12沒有出現Vue圖標

點擊擴展程序灰色圖標，選中，給它允許。

?

分析問題

有很多教程說是要在manifest.json里將"persistent"改為true，但我的文件打開以后就是true。

還有，引用vue.js代碼，需要是開發版本的，生產版本的看不到這個圖標。

我檢查了一下，我引用的是：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>，也沒有問題。

為了更好地說明白，以上兩種建議都自行檢查一下，引用vue.js代碼檢查一下自己的代碼，manifest.json這個文件配置，修改步驟如下：

解決問題

檢查manifest.json里"persistent"是否為true，如果不是，要改成true

這個文件manifest.json在哪？

谷歌瀏覽器輸入：chrome://version/，將個人資料路徑復制

輸入路徑，找到Extensions文件夾，一路向下打開文件，會看到一個manifest.json文件

?

我的情況都不是以上的兩個問題，我進行了如下的操作，打開管理擴展程序

有權訪問所有網站，允許訪問文件地址，收集各項錯誤，都選上

?

然后關閉瀏覽器，重新打開文件，??終于Vue的圖標出現了！ ！！

3、總結

vue學習前奏，雖然是個很簡單的配置，但各種論壇博客信息很多，可能和每個人的情況都不一樣，比如manifest.json這個文件在哪？很多博客就沒講清楚，當然可能我遇到的問題，和你的問題不一樣，我是在翻閱了大量的資料，然后進行各種嘗試，把問題解決了，如果對你也有幫助，幫忙點個贊！！！