构建：vue项目配置后端接口服务信息

Posted 2021-01-31 zhq--blog

背景

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

同开发环境，无需重复配置

三、生产环境静态文件获取目录（静态文件独立部署）

待续……