[vue]axios封装判断开发环境以及生产环境

1.安装脚手架
3.0以下
npm install -g vue-cli@版本号
3.0以上
npm install -g @vue/cli@版本号
查看脚手架版本
vue -v


2.创建项目（本文章采用脚手架4.0）

vue create project-name

创建项目，具体详情的项目配置，本文省略，可参考下面的文章
https://www.cnblogs.com/zhoulifeng/p/11690799.html


项目创建好后

cd project-name // 进入项目根目录
npm run serve // 运行项目

然后在浏览器输入http://localhost:8080,就可以看到运行的界面了


3.创建配置文件
脚手架4.0已经没有config文件，如果要修改配置文件，直接在项目根目录下直接创建vue.config.js文件，将要修改的值，写到这个文件中即可（本文不会用到，就不展示了）。


要实现开发环境与生产环境，不同时，使用不同的地址。需要对开发环境与生产环境进行不同的设置。
在根目录下创建.env.development与.env.production两个文件
创建开发环境变量 .env.development
创建生产环境变量 .env.production



.env.development文件：

VUE_APP_BASE_URL = 'http://localhost:9999'

.env.productio文件：
VUE_APP_BASE_URL = 'http://localhost:8888'



注：
1.修改文件后，刷新无用，一定要重新执行命令后，配置才会生效
2.以VUE_APP_开头是定义相对应的环境变量
4.使用axios请求数据

npm install axios --save

在main.js中加入如下代码：

import Axios from 'axios'
if(process.env.NODE_ENV === 'development') { //说明当前为开发环境
                                            // 开发环境相关特殊方法
    Axios.defaults.baseURL=process.env.APP_BASE_URL;
    //baseUrl地址使用.env.development文件中的配置对象API_HOST，API_HOST名称不固定，根据你的定义的来
}
else if(process.env.NODE_ENV === 'production'){
    // 生产环境相关特殊方法
    Axios.defaults.baseURL=process.env.APP_BASE_URL;
    // baseUrl地址使用.env.production文件中的配置对象API_HOST，API_HOST名称不固定，根据你的定义的来
}
Vue.prototype.$axios=Axios;

5.在nodejs中启动服务
localhost:8888/list        post方式
localhost:9999/list        post方式
保证上面的接口，正确返回数据


6.在组件中通过axios请求接口数据

mounted:function(){
    this.$axios.post("/list").then((res)=>{
        this.list=res.data;
        console.log(res);
    })
}

7.测试
开发环境：npm run serve
正线环境：
需要创建vue.config.js，添加如下代码：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

在执行npm run build


大家，可以看到开发环境与生产环境的值不一样


原创文章，转载请写明出处：http://bugshouji.com/shareweb/t1031