vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法

因为项目测试的需要，我需要给测试人员一个项目的测试环境版本和生产环境版本，两个版本的区别就是请求的接口地址不一样而已，一开始，我是在webpack配置了不同的命令，让测试去打包，比如：使用npm run test 打包测试版本，使用npm run build打包生产环境的版本，可是测试嫌麻烦，说让弄成配置文件形式的 ，直接改配置文件就可以改接口地址的那种。

想了一阵子没想到方法，同事过来看了看说，，把接口地址挂载window全局对象下面不就行了，在同事 的点拨下，瞬间知道该咋做了，，好吧，是我想的太复杂了

简单的做法：

1.在项目根目录下的static文件夹下新建一个config.js(因为static文件夹下的东西在执行打包的时候会复制到打包后的目录里)，在里边写：

window.serverAPI={

url:"http://www.xxx.com",

timeout:5000

}

2.在入口index.html 里 引入config.js

3.在项目中配置axios就可以这样：

let http = axios.create({

baseURL: window.serverAPI.url,

timeout: window.serverAPI.timeout

});

然后 测试 拿去用的话 就可以自己去改config.js里的url 来改接口地址啦

第二种方法