vue升級到2.9.1後，通過其vue-cli構建的webpack專案目錄結構發生以下變化

更多精彩

發生的變化

1. 在2.9.1之前，通過vue-cli構建的專案build目錄如下，如左圖
2. 在2.9.1之後，通過vue-cli構建的專案build目錄如下，如右圖

3. 通過以上兩張圖可以明確看出新版本構建出的專案缺少了dev-client.js和dev-server.js檔案

造成的問題

1. 缺少dev-server.js檔案之後，所帶來的問題是之前我們在需要編寫代理請求時會在該檔案中自定義如下路由資訊，而現在應該將這些路由資訊存放在哪

var apiRoutes = express.
 
Router()

apiRoutes.get('/getDiscList', function (req, res) {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    res.json(response.
 
data)
  }).catch((e) => {
    console.log(e)
  })
})

app.use('/api', apiRoutes)

解決的方式

1. 其實在新版本中關於伺服器的配置資訊都被存放在webpack.dev.conf.js檔案中，所以對於用來發送代理請求的自定義路由資訊自然也應該存放到該檔案中
2. 只是存放的方式稍有變化，在新版本中伺服器通過webpack-dev-server進行管理，所以需要在該server啟動之前將代理請求介面對映完畢
3. webpack3內建了express() ，以下程式碼中的app就是express返回的物件

devServer:
 
 {
  ...
  // 在伺服器開啟之前，將需要被代理的請求與本地介面進行一一對應
  before (app) {
    // 由於QQ音樂獲取歌單列表的介面做了header資訊的驗證，所以需要通過代理的方式去模擬其規則範圍的header，使用其允許的header發起請求
    app.get('/api/getDiscList', function (req, res) {
      // 真實的QQ音樂獲取歌單列表的請求
      const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'

      // 通過axios傳送非同步請求
      axios.get(url, {
        // 在傳送請求時修改標頭檔案，模擬合法的標頭檔案，去欺騙伺服器獲取請求資料
        headers: {
          referer: 'https://c.y.qq.com/',
          host: 'c.y.qq.com'
        },
        // 獲取引數列表
        // 由於瀏覽器請求引數是穿透傳播的，所以當前端請求getDiscList時，傳遞的引數在次數可以直接獲取到
        params: req.query
      }).then((response) => {
        // res是本地方法接收本地請求的返回值
        // response是訪問伺服器介面的返回值
        // 此處只需要將從伺服器獲取的返回值通過json的方式傳遞給本地請求的返回值，即實現了一次代理轉發
        res.json(response.data)
      }).catch((e) => {
        // 捕獲錯誤資訊並輸出
        console.error(e)
      })
    })
  }
}