一段時間沒有用vue，其腳手架已經(jīng)更新到2.9.3，使用新的vue-cli構(gòu)建項目，生成的目錄和之前的不太一樣，這里不細說，下面羅列筆者遇到的深坑：

vue-cli版本的升級

之前筆者使用的是2.8.1版本的vue-cli，按下vue init webpack project-name初始化項目的時候~ 各種報錯，因為已經(jīng)完成了升級~ 原諒筆者這里就不具體截報錯的圖了~~
最簡單粗暴的方法是直接npm uninstall vue-cli -g 卸載后再重新輸入npm install vue-cli -g
一切順利的話也就升級好了~ 奈何筆者布吉島什么時候手賤，修改了npm install -g全局安裝時的默認目錄~ 一般默認情況下是安裝在"C:\Users\xxx(用戶名)\AppData\Roaming\npm"，筆者應該是當年安裝vue-cli的時候安裝到了默認路徑下，然后布吉島什么時候修改了全局安裝路徑~ 導致卸載的時候卸載的是node安裝目錄下node_global/node_module里的vue-cli包~ 于是乎~ 第一次輸入npm uninstall vue-cli -g 卸載~ 其實相當于什么也沒發(fā)生，因為之前安裝的vue-cli壓根就不在這里，接著重新全局安裝，便將新版本的vue-cli安裝到了這個目錄下，裝是裝好了，可是打開命令行，輸入vue init webpack project-name的時候，使用的是之前安裝到"C:\Users\xxx(用戶名)\AppData\Roaming\npm"下的舊版本的vue-cli，于是開始各種報錯各種不對了。。。。。。

• 填坑：將手賤修改的路徑改回之前默認的去，命令如下：
  npm config set prefix "C:\Users\xxx\AppData\Roaming\npm"
  然后就卸載重裝吧~

新版本vue-cli構(gòu)建的項目無法通過局域網(wǎng)網(wǎng)址訪問

新版本vue-cli構(gòu)建的項目目錄和配置跟之前的都有差異，最神奇的是之前的項目，運行npm run dev 手機連上wifi，用局域網(wǎng)可以愉快的訪問，新版的卻只能在電腦端輸入localhost訪問，也是呵呵了

• 填坑：修改config/index.js，具體修改如下圖：
  
  image.png
  
  將localhost改為0.0.0.0，順帶把那個自動打開瀏覽器的設置改為true，新版默認情況下不自動打開瀏覽器。。。。。
  至于第三個紅框，筆者上網(wǎng)查的資料是，有小伙伴說單單只是修改localhost的選項依舊不能遠程訪問，還需要將devtool選項修改為inline-source-map
  筆者測試的結(jié)果是此項修不修改都可以手機訪問，所以，讀者視情況而定。