[JavaScript知识库]vue 获取代理地址封装

以前我们设置vue代理地址的时候是在vue.config.js文件中增加devServe属性，然后在proxy属性里面配置代理地址，目前网上都是配置一个代理地址的方法，但在实际开发中需要配置多个代理地址，我的这个方法只需要在.env.development文件里配置代理地址即可，打包时自动替换地址。下面是方法

1.在src目录新建一个config文件夹，里面新建一个index.js文件

const obj = process.env
const tempObj = {}

for (const key in obj) {
  if (key.indexOf('VUE_APP') !== -1) {
    tempObj['/' + key] = {
      target: obj[key],
      changeOrigin: true,
      pathRewrite: {
        ['^/' + key]: '/'
      },
      url: process.env.NODE_ENV === 'production' ? obj[key] : key
    }
  }
}

module.exports = {
  proxy: tempObj
}

2.然后像下面这样

 devServer: {
    port: port,
    open: true,
    https: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: config['proxy']
  },

3.在需要获取服务器地址的地方这样获取就可以了，后面可以拼接任何api接口地址

onfig['proxy']['/VUE_APP_URL'].url

4.然后记得在babel.config.js文件中增加sourceType属性

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous',
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖