vue打包时配置生产环境的接口

效果图

先看效果图，打包后在dist中打开index.html可以看到，访问接口是正确的。

方法

1.配置config/prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://www.puduoduo.com/api.php?s="'
}

2.处理axios的baseURL

比如我的在util/http.js中处理

import axios from 'axios';
import QS from 'qs';

var env = process.env;
if(env.NODE_ENV == 'production'){
  axios.defaults.baseURL= env.API_HOST
}
// console.log('http.defaults.baseURL: ', axios.defaults.baseURL);

注：官方解释：process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。

3.处理接口api

比如我的所有的api接口链接房子util/api.js中

import { get, post } from "./http";

// 打包时去掉接口中的"/api/"
var env = process.env;
var api = env.NODE_ENV == "production" ? "" : "/api";

// 常用的接口
const common = {
  province: p => post(api + "/dict/province", p), //省
  city: p => post(api + "/dict/city", p), //市
  district: p => post(api + "/dict/district", p), //区
  bankList: p => post(api + "/dict/bankList", p) //所有银行列表
};

因为在开发环境中使用了代理，

proxyTable: {
      '/api': {
        target: 'http://www.puduoduo.com/api.php?s=',
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/api': ''   //需要rewrite重写的,
        }
      }
    },

所有的接口上会添加’/api’，所以打包时要去掉

好了，至此，已解决打包时修改接口域名的问题，如果帮到了你，请点个赞哈。