vue中如何给生产环境和开发环境配置不同的baseURL

第一步： 设置不同的接口地址

找到文件config/dev.env.js
对开发环境下设置接口

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: "/api/"
})

找到文件/config/prod.env.js
给生产环境下设置接口地址

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    API_HOST: '"http://musicapi.leanapp.cn/"'
}

第二步：调用axios文件下修改baseURL

axios.defaults.baseURL=process.env.API_ROOT

配置baseURL的三种方法：

1. 常规设置：
   在只需要配置单个或者有明确接口的时候直接设置，在生产环境和开发环境下需要手动修改

   axios.defaults.baseURL="http://192.168.1.1:5000";

2. 动态获取请求地址
   在线上获取地址不明确或者不想手动更改地址的时候可以设置自动获取当前的域名来进行请求，不好的地方在于跨域的话端口是写死的

   let protocol = window.location.protocol; //协议
   let host = window.location.host; //主机
   let reg = /^localhost+/;
   if(reg.test(host)) {
      //若本地项目调试使用
       axios.defaults.baseURL = 'http://192.168.1.1:5000';
   } else {
       //动态请求地址             协议               主机
       axios.defaults.baseURL = protocol + "//" + host  +":5000";
   }

3. 采用配置文件
   应用于多个不明确的部署环境，可在不重新打包的情况下更改接口地址，如下设置后只需在dist里面static下找到 config.js更改值就可以实现更换接口地址

   window.gurl={
   AXIOS_TIMEOUT:10000,
   SERVICE_CONTEXT_PATH:'http://192.168.1.1:5000' 
 }

在index.html里面引入config.js

   <script src="./static/config.js" type="text/javascript"></script>

main.js

	axios.defaults.baseURL = window.gurl.SERVICE_CONTEXT_PATH;

第三步：重启项目

npm run dev的时候开发环境下和生产环境下调用的不一样的接口