1921600225473_.pic.jpg

環境

• laradock

• @vue/cli 4.5.4

問題

• 啟動 vue 項目

$ yarn serve

2020-09-16_5f6177d2a45f7.png

• 訪問

2020-09-16_5f61789f5bdf7.png

訪問 http://localhost:8080/admin-dev/ ，看到 network 中請求的 api 報錯如上圖所示。這是因為后端 api 請求僅支持80端口，這邊指向8080，勢必不行。

解決

• 修改 vue.config.js

let proxyObj = {};
proxyObj['/ws'] = {
    ws: true,
    target: "ws://192.168.50.186:8081"
};
proxyObj['/'] = {
    ws: false,
    target: "http://192.168.50.186:80",
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
};
module.exports = {
  devServer: {
      host: '0.0.0.0',
      port: 8080,
      proxy: proxyObj
  }
}

使用 devServer.proxy 完成代理配置即可，proxyObj.target 指向的是請求的 api 地址，這里分別代理了 api 和 websocket 請求。

• 再次啟動 vue 項目

2020-09-16_5f617e6438e07.png