vue-cli 中如何根据运行环境调用接口地址

Question

在使用vue-cli生成的vue项目中如何根据不同的运行环境（开发，测试，线上）调用不同的接口地址?
如测试环境调用 http://test.api.xxx.com:8080 接口地址，
线上环境调用 http://api.xxx.com:8080 接口地址。

Answer 1

修改项目中build文件夹下的webpack.dev.conf.js 和 webpack.prod.conf.js文件,这两个文件分别是webpack开发环境配置和生产环境配置

webpack.prod.conf.js

module.exports ={
     // ...
     plugins: [
        new webpack.DefinePlugin({
            'process.env': env,
            'BASE_URL': '"http://api.xxx.com:8080"'
        })
      ],
     // ...
}

// webpack.dev.conf.js

module.exports ={
     // ...
     plugins: [
        new webpack.DefinePlugin({
            'process.env': env,
            'BASE_URL': '"http://test.api.xxx.com:8080"'
        })
      ],
     // ...
}

调用接口的时候直接使用 BASE_URL 即可

 this.$http.get(BASE_URL + '/getData', function(data) {});

Answer 2

提供一个思路：通过判断域名来选择。目前项目正在用的一种方案，不同的环境，域名肯定是不一样的，在ajax层面上，统一做一次拦截，然后为接口增加域名前缀

Answer 3

这跟vue已经木有关系了，是webpack的领域，具体的思路是：npm run dev的时候定义个变量声明当前是开发环境，而npm run build的时候则定义个变量声明是生产环境。然后你在代码里就可以根据这个变量来判断此时应该使用哪个接口地址了。

详细请参考此文《webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？》