概述
在firefox可以通過(guò)，瀏覽器-打開(kāi)菜單-附加組件 從插件中安裝vue-tools
但是在 chrome內(nèi)是無(wú)法安裝的，因?yàn)檎咴驘o(wú)法訪問(wèn)，因此如果想用chrome的瀏覽器，來(lái)調(diào)試vue項(xiàng)目就很不方便了
但是通過(guò)git工具我們可以手動(dòng)安裝
流程
- 通過(guò)github下載vue-devtools ，可以download zip包
- 解壓至指定文件目錄，運(yùn)行npm install 安裝依賴
- 通過(guò)npm run build 打包
如果成功的話則進(jìn)行后續(xù) 配置瀏覽器插件
如果不成功 可以看看 報(bào)錯(cuò)流程
配置瀏覽器插件
- 打開(kāi)shells/chrome/manifest.json中的"persistent": false。將值改為true
- 打開(kāi)谷歌瀏覽器，輸入 chrome://extensions/ ，選擇開(kāi)發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，選擇shells/chrome文件夾
-
將vue-tools固定至瀏覽器頂部工具欄
固定工具至菜單欄
報(bào)錯(cuò)流程
參考的原貼位置
[ 報(bào)錯(cuò)一 ]：'webpack' 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序 或批處理文，且已經(jīng)安裝過(guò)nodejs
問(wèn)題原因：很有可能沒(méi)有全局安裝webpack
解決流程：
- 確保nodeJS已安裝的情況下，打開(kāi)nodejs文件夾 查看有沒(méi)有
node_cache、node_global兩個(gè)文件夾 - 如果沒(méi)有這2個(gè)文件夾，則手動(dòng)創(chuàng)建這兩個(gè)文件夾
- 修改npm全局配置
npm config set prefix "你的nodejs文件夾路徑\node_global"
npm config set cache "你的nodejs文件夾路徑\node_cache"
- 修改系統(tǒng)環(huán)境變量
桌面--> 我的電腦 --> 右擊 屬性 --> 高級(jí)系統(tǒng)設(shè)置 --> 環(huán)境變量
環(huán)境變量下分為 用戶變量 與 系統(tǒng)變量
4-1. 修改 系統(tǒng)變量:
新建一個(gè)名稱為NODE_PATH的系統(tǒng)變量, 路徑為"你的nodejs文件夾路徑\node_global\node_modules"
4-2. 修改 系統(tǒng)變量:
對(duì)path選擇后，點(diǎn)擊編輯，新建一個(gè)"你的nodejs文件夾路徑\node_global"
4-2. 修改 用戶變量:
點(diǎn)擊Path，選擇編輯，新增 "你的nodejs文件夾路徑\node_global\node_modules" - 全局安裝webpack，如果安裝結(jié)束后，無(wú)法使用
webpack -v查看安裝版本信息，則安裝cli工具
npm install webpack -g
npm install webpack-cli -g
- 運(yùn)行
webpack -v查看當(dāng)前版本，如果還提示不是內(nèi)部命令，則需要關(guān)閉命令行窗口，重新打開(kāi)再次輸入webpack -v即可
[ 報(bào)錯(cuò)二 ]：
參考的原貼位置
在不存在webpack未全局安裝的問(wèn)題下，打開(kāi)vue-tools文件夾去運(yùn)行npm install之后，執(zhí)行 npm run build的命令依舊報(bào)錯(cuò)~
出現(xiàn)：
This is probably not a problem with npm,There is likely additional logging output above
問(wèn)題原因：
安裝的webpack版本與vue-tools的安裝依賴中，各種包的版本不兼容
解決方法：
- 下載比較舊的版本，vue-tools v5.1.1下載地址
- 解壓后，
npm install安裝依賴，打包npm run build，成功了~~?。?！
繼續(xù)上述 配置瀏覽器插件的后續(xù)流程，完成瀏覽器的最終配置。
參數(shù)參考
本機(jī)系統(tǒng)信息：
nodejs v10.16.0
webpack 5.11.0
webpack-cli 4.3.0
vue-tools信息
v5.3.3 -- 安裝報(bào)錯(cuò)的版本
v5.1.1 -- 成功版本
