構建：vue項目配置後端接口服務信息

背景

vue-cli腳手架生成的webpack標準模板項目

HTTP庫使用axios

1、開發環境跨域與API接口服務通訊

總體思路：

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

具體步驟以下：

一、config/dev.env.js文件中配置baseURL

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

二、axios配置baseURL

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

三、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': '' // 重寫路徑
        }
      }
    },

……
  }
}

2、生產環境配置API接口服務信息

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

一、config/dev.env.js文件中配置baseURL

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

二、axios配置baseURL

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

3、生產環境靜態文件獲取目錄（靜態文件獨立部署）

待續……