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 相关文章推荐
JavaScript常用小技巧小结
Dec 29 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
Vue头像处理方案小结
Jul 26 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
jquery实现下载图片功能
Jul 18 jQuery
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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网上商城购物车设计代码分享
2012/02/15 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue mounted组件的使用
2018/06/18 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
python实现清屏的方法
2015/04/30 Python
python相似模块用例
2016/03/04 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python中JWT用户认证的实现
2020/05/18 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019求职信大礼包
2019/05/15 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android