vue 接口请求地址前缀本地开发和线上开发设置方式


Posted in Javascript onAugust 13, 2020

开发环境 config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./dev.env')
 
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"https://www.dev.com"' //本地请求前缀
})

线上开发环境 config/prod.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
 NODE_ENV: '"production"',
 API_ROOT: '"https://www.prov.com"'  //线上请求前缀
})

在请求之前,组装URL,axios.js

import Axios from 'axios';
var root = process.env.API_ROOT;
//请求拦截
axios.interceptors.request.use((config) => {
  //请求之前重新拼装url
  config.url = root + config.url;
  return config;
});

页面使用模板:

export default {
  name: 'Order',
  data () {
    return {
      order_list: []
    }
  },
  methods: {
    fetchList: function () {
      this.$axios.post('/api/order_list').then((res) => {
        if(res.result === '0000'){
          this.order_list = res.data;
        }
      });
    }
  }
}

补充知识:vue中axios固定url请求前缀

vue 接口请求地址前缀本地开发和线上开发设置方式

main.js中添加:

vue 接口请求地址前缀本地开发和线上开发设置方式

使用方法:

vue 接口请求地址前缀本地开发和线上开发设置方式

以上这篇vue 接口请求地址前缀本地开发和线上开发设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
vue路由分文件拆分管理详解
Aug 13 #Javascript
Postman环境变量全局变量使用方法详解
Aug 13 #Javascript
vue 实现把路由单独分离出来
Aug 13 #Javascript
vue项目接口域名动态获取操作
Aug 13 #Javascript
vue接通后端api以及部署到服务器操作
Aug 13 #Javascript
vue打包npm run build时候界面报错的解决
Aug 13 #Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 #Javascript
You might like
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP实现简易计算器功能
2020/08/28 PHP
看了就知道什么是JSON
2007/12/09 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
利用Psyco提升Python运行速度
2014/12/24 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
护士个人简历自荐信
2013/10/18 职场文书
普通大学毕业生自荐信
2013/11/04 职场文书
竞选班委演讲稿
2014/04/28 职场文书
公司演讲稿开场白
2014/08/25 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书