vue （cli3）生产环境接口JS配置

新建一个config.js

//项目域名地址
let URL = "http://***.***.***.***:****";

let ROOT;
//由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
if (process.env.NODE_ENV === "development") {
  //开发环境下的代理地址，解决本地跨域跨域，配置在vue.config.js里
  ROOT = "/apis";
} else {
  //生产环境下的地址
  ROOT = URL;
}
// export default { ROOT, URL };
exports.URL = URL; //代理指向地址
exports.ROOT = ROOT;

vue.config.js里的配置

// 引进config.js
const BaseUrl = require("./src/config.js");
// 代理接口配置
devServer: {
    port: 8080, // 端口号
    host: "0.0.0.0",
    https: false, // https:{type:Boolean}
    open: false, //配置自动启动浏览器
    proxy: {
      [BaseUrl.ROOT]: {
        target: BaseUrl.URL, // 通过本地服务器将你的请求转发到这个地址
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          [`^${BaseUrl.ROOT}`]: "/"
        }
      }
    }
  },

封装的axios配置

//http.js
//引进来
import BaseUrl from "../config";
// 应用
export default {
  post(url, data) {
    return axios({
      method: "post",
      baseURL: BaseUrl.ROOT + "/******/",
      url,
      data: qs.stringify(data),
      timeout: 2000,
      headers: {
        Accept: "application/json; charset=utf-8",
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      }
    }).then(response => {
      return checkStatus(response);
    });
  }
};

注意config.js的路径，按自己项目配置的路径来。