vue中使用axios给生产环境和开发环境配置不同的baseUrl

1，在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量。2，首先打开 dev.env.js 文件，添加一个 BASE_URL 变量，其值为开发环境下使用的后台接口域名dev.env.js'use strict'const merge = require('webpack-merge')const prodEn

xiami133

2058人浏览 · 2020-10-04 16:30:39

xiami133 · 2020-10-04 16:30:39 发布

1，在项目的 config 文件夹下有 dev.env.js 和 prod.env.js 两个文件，它们分别配置开发环境的变量和生产环境的变量。
在这里插入图片描述
2，首先打开 dev.env.js 文件，添加一个 BASE_URL 变量，其值为开发环境下使用的后台接口域名
dev.env.js

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API: '"http://127.0.0.1:8000"',
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API: '"http://www.baidu.com:3000"',
}

3，在创建axios实例的时候调用

// 创建axios实例
// const BaseURL = process.env.VUE_APP_URL // 跟进开发环境在编译时候，返回相对应的路径
const BaseURL = process.env.VUE_APP_BASE_API
console.log('a', BaseURL)
const service = axios.create({baseURL: BaseURL, timeout: 8000 // 请求超时时间
})