sunshine
管理员
管理员
  • 最后登录2023-10-30
  • 发帖数170
  • 社区居民
阅读:4358回复:0

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

楼主#
更多 发布于:2020-02-10 17:04
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

最新喜欢:

小达人小达人
游客


返回顶部

公众号

公众号