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')

这样子就好了！！！(●’◡’●)