背景

vue專案如何請求後端api？

vue-cli腳手架生成的webpack標準模板專案

HTTP庫使用axios

一、開發環境跨域與API介面服務通訊

整體思路：

• 開發環境API介面請求baseURL為本地http://localhost:8080
• 為本地請求配置代理，代理目標伺服器設定為介面服務所在地址或域名

具體步驟如下：

1、config/dev.env.js檔案中配置baseURL

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8080"' //配置為本地地址才會訪問到本地虛擬的伺服器，從而通過第1步中代理訪問API服務，避免跨域
})

2、axios配置baseURL

// 建立axios例項
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 請求超時時間
})

3、config/index.js檔案中配置開發環境代理

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 代理配置資訊
      '/taskinfo': {
        target: 'http://192.168.162.22:8381/taskinfo', // API服務所在IP及埠號
        changeOrigin: true, // 如果設定為true,那麼本地會虛擬一個伺服器接收你的請求並代你傳送該請求，這樣就不會有跨域問題（只適合開發環境）
        pathRewrite: {
          '^/taskinfo': '' // 重寫路徑
        }
      }
    },

……
  }
}

二、生產環境配置API介面服務資訊

生產環境直接指向API介面服務，使用IP或域名

1、config/dev.env.js檔案中配置baseURL

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://192.168.162.22:8381/"' // API服務所在IP及埠，或域名
}

2、axios配置baseURL

同開發環境，無需重複配置

三、生產環境靜態檔案獲取目錄（靜態檔案獨立部署）

待續……