码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-02 01:15:46      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:服务   配置   pac   静态   get   ase   ice   set   pack   

背景

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

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

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

待续……

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

标签:服务   配置   pac   静态   get   ase   ice   set   pack   

原文地址:https://www.cnblogs.com/zhq--blog/p/10206568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!