vue打包之后配置统一请求地址

1.第一步

在public文件夹下新建一个config.js文件,并添加如下内容

exports.PLATFROM_CONFIG = {

    baseURL: "服务器地址"

}

2.第二步

在vue.config.js中根据路径引入后，修改服务器代理地址target

const PLATFROM_CONFIG = require('./public/config.js')

devServer: {

    port: 8080,

    proxy: {

      '/fdapis': {

        target: PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL,//修改服务器代理地址

        ws: false,

        changeOrigin: true,

        pathRewrite: {

          '^/fdapis': ''  //需要rewrite的,

        }

      }

    }

  },

3.第三步

在封装的网络请求文件中设置默认请求地址，我的项目中请求地址在request.js文件中配置

首先，根据路径引入public文件中的config.js文件：

import PLATFROM_CONFIG from '../../public/config'

其次，根据地址配置，修改PLATFROM_CONFIG文件中的baseURL地址：

PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL=localStorage.getItem('BASE_URL')  // 在request.js中修改配置地址

这里之所以从localStorage.getItem('BASE_URL') 中取值，并赋值给PLATFROM_CONFIG文件中的baseURL是由于，我的地址在登录时由用户自己配置服务器地址以及端口号，并存储在了session中。如下图所示：

用户自己配置服务器地址

最后，可以统一配置服务器请求地址：

Vue.prototype.BASE_URL = localStorage.getItem('BASE_URL') // 公共的服务器地址