1.新建.env.development 和.env.production文件

新建.env.development 和.env.production文件
.env.development 开发环境
.env.production 生产环境
变量名称一定要以 VUE_APP 开头
访问 变量process.env.变量名

2.新建一个 request.js文件

import axios from "axios"

const service1 = axios.create({
	baseURL: process.env.VUE_APP_SERVICE_URL1,//打包后的域名
});
const service2 = axios.create({
	baseURL: process.env.VUE_APP_SERVICE_URL2,//打包后的域名
});


function post(url, data) {
  //process.env.VUE_APP_SQL 代理接口的前缀  url 传过来
	return service1.post(process.env.VUE_APP_SQL + url).then(response => {
		return response.data
	}, err => {

	})
}

function post2(url, data) {
  //process.env.VUE_APP_API 代理接口的前缀  url  传过来
	return service2.post(process.env.VUE_APP_API + url, ).then(response => {
		return response.data
	}, err => {
		reject(err)
	})
}
export default {
	post,
	post2
}

3.vue.config.js

module.exports = {
	devServer: {
		host: 'localhost',
		https: false, //协议
		port: 8080,
		proxy: {
			[process.env.VUE_APP_SQL]: {
				target: "后台地址1",
				changeOrigin: true,
				pathRewrite: {
					[process.env.VUE_APP_SQL]: ''
				},
			},
			[process.env.VUE_APP_API]: {
				target: "后台地址2",
				changeOrigin: true,
				pathRewrite: {
					[process.env.VUE_APP_API]: ''
				}
			},
		}
	},

	productionSourceMap: true,
	chainWebpack: (config) => {
		config.plugins.delete('prefetch');
	}
}

原理就是本地开发使用proxy接口代理，线上使用axios的baseURL设置一个默认地址
线下线上地址区分开来