Vue开发环境和生产环境的配置

配置文件

.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件.

.env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件

js

命名规则

属性名必须以VUE_APP_开头
比如VUE_APP_BASE_API_D
js

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分别在两个运行环境下都成功实现。
具体效果请实测！