vue根据不同的环境配置接口路径,带不同版本号的接口路径配置,脚手架2及3以上都可以配置

首先创建两个不同环境的文件;
注意:VUE_APP_BASE_API需要和下面的都对应
生产环境:

#.env.development
# just a flag
ENV = "development"
#键值对,必须以VUE_APP开头 
# base api  

VUE_APP_BASE_API = "http://XXXXXXX"

在这里插入图片描述
开发环境:
window.location.origin是指定发布环境的地址,不用每次手动去改了

#.env.production
# just a flag
ENV = "production"
# 键值对,必须以VUE_APP开头
# base api

VUE_APP_BASE_API =  window.location.origin

在这里插入图片描述
创建好之后,利用vue.config.js的代理去指定环境process.env.VUE_APP_BASE_API,如果不使用代理的话,下面代码可忽略

proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        secure: false,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

在这里插入图片描述
然后再请求封装axios的时候,创建axios实例时透露给baseURL,
如果不使用下面的这种的话,
也可以用***axios.defaults.baseURL***代替下面的

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API + '/v1', // url = base url + request url
  withCredentials: true // 跨域请求时发送Cookie
})

在这里插入图片描述
如果你不知道是否切换正常没,可以再main.js打印看看

console.log(process.env.VUE_APP_BASE_API, '环境')

上面是针对发布到服务器上和后端在不同文件夹下的!!!

--------------------------------------分段了----------------------------------------

问题是我们后端偏偏把前端和后端的放在一个文件夹下,导致了很多的问题
开发环境的文件需要这样写:VUE_APP_BASE_API =
至于为什么我也未可知

#.env.production
# just a flag
ENV = "production"
# 键值对,必须以VUE_APP开头
# base api

VUE_APP_BASE_API = 

在这里插入图片描述
在请求拦截器内:

let url
    if (process.env.NODE_ENV === 'development') {
      url = config.baseURL + config.url
    } else if (process.env.NODE_ENV === 'production') {
      url = config.url
    }
    config.url = url

在这里插入图片描述
就可以了
一般最前面说的方法是大众型的,我说的是特殊的情况,所以特殊对待,可以忽略。。。O(∩_∩)O

vue cli2的也说一下吧,毕竟还有在用的人
在config文件下新建两个js文件
分别为:
dev.env.js(开发环境)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API:'//http://XXXXXXXXXX'
})

在这里插入图片描述

prod.env.js(生产环境)

在这里插入代码片'use strict'
const target = process.env.npm_lifecycle_event;
if (target == 'build:dev') {
    //测试
    var obj = {
        NODE_ENV: '"development"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'"http://XXXXXXXXXX"',
    }
}else {
    //线上
    var obj = {
        NODE_ENV: '"production"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'window.location.origin',
    }
}
module.exports = obj;

在这里插入图片描述
在config目录下的index.js文件引入

env:require('./dev.env')

在这里插入图片描述
这样子就好了!!!(●’◡’●)

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值