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 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 // 请求超时时间 })