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

背景

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

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

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

待續……