配置文件
.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件..env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件js
命名规则
属性名必须以VUE_APP_开头比如VUE_APP_BASE_API_Djs
.env.development文件配置
ENV = 'development'VUE_APP_BASE_API_D = 'http://134.111.111.111'js
.env.productio文件配置
ENV = 'production'VUE_APP_BASE_API_D = 'http://112.5.112.112'js
使用axios封装
创建第一步封装Api
import axios from "axios";const serveBaseApi=axios.create({baseURL:process.env.VUE_APP_BASE_API_D,//process.env代表引用我们之前的文件配置。timeout:3000})export default serveBaseApi;js
第二部封装Api
import serveBaseApi from "@/api/serveApi/serveBaseApi";export function development(query) {return serveBaseApi({url:'shixishen/git-bash.png',//这里后缀都一样，则只需要封装一个。methods:'get',params:query,})}js
最后使用按钮请求数据
<el-button @click="TestBtn">测试</el-button>import {development} from "@/api/serveApi/development";TestBtn(){console.log('不同环境',process.env.VUE_APP_BASE_API_D)development({},).then(res=>{console.log(res)})}//这里导入封装的Api，我们运行开发环境和生产环境分别给的Api前缀不同，就是我们配置的env.development和env.production
由于我们请求不到数据，所以报错，但是生产环境配置的Api和开发环境配的Api分别在两个运行环境下都成功实现。
具体效果请实测！
