概述
在firefox可以通過恨诱，瀏覽器-打開菜單-附加組件 從插件中安裝vue-tools
但是在 chrome內(nèi)是無法安裝的斩萌，因?yàn)檎咴驘o法訪問或南，因此如果想用chrome的瀏覽器古劲，來調(diào)試vue項(xiàng)目就很不方便了
但是通過git工具我們可以手動(dòng)安裝
流程
- 通過github下載vue-devtools ，可以download zip包
- 解壓至指定文件目錄璃哟，運(yùn)行npm install 安裝依賴
- 通過npm run build 打包
如果成功的話則進(jìn)行后續(xù) 配置瀏覽器插件
如果不成功 可以看看 報(bào)錯(cuò)流程
配置瀏覽器插件
- 打開shells/chrome/manifest.json中的"persistent": false。將值改為true
- 打開谷歌瀏覽器喊递，輸入 chrome://extensions/ 随闪，選擇開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序骚勘，選擇shells/chrome文件夾
-
將vue-tools固定至瀏覽器頂部工具欄
固定工具至菜單欄
報(bào)錯(cuò)流程
參考的原貼位置
[ 報(bào)錯(cuò)一 ]：'webpack' 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序 或批處理文铐伴，且已經(jīng)安裝過nodejs
問題原因：很有可能沒有全局安裝webpack
解決流程：
- 確保nodeJS已安裝的情況下，打開nodejs文件夾 查看有沒有
node_cache俏讹、node_global兩個(gè)文件夾 - 如果沒有這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é)束后梯浪，無法使用
webpack -v查看安裝版本信息，則安裝cli工具
npm install webpack -g
npm install webpack-cli -g
- 運(yùn)行
webpack -v查看當(dāng)前版本瓢娜，如果還提示不是內(nèi)部命令挂洛，則需要關(guān)閉命令行窗口，重新打開再次輸入webpack -v即可
[ 報(bào)錯(cuò)二 ]：
參考的原貼位置
在不存在webpack未全局安裝的問題下眠砾，打開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
問題原因：
安裝的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 -- 成功版本
