vue开发环境和生产环境配置

开发环境配置

一般情况下开发环境是会跨域的，所以我们只需要在跨域的位置配置即可。进入config/index.js，在proxyTable对象里面添加代码，如下

'/api': {
        target: 'http://localhost:8082', //开发环境,设置调用接口域名和端口号别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
          // 比如我要调用'http://0.0.0.0:3000/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
        }
      }

生产环境配置

进入config/prod.env.js，添加属性BASE_API为自己的生产环境地址即可，如下

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://192.168.1.11:8080"',
}

调后台接口

新建request.js文件

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.NODE_ENV==='production' ? process.env.BASE_API : "/api",
  timeout: 20000
})