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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
javascript实现完美拖拽效果
May 06 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
微信小程序 教程之事件
Oct 18 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
实现高性能javascript的注意事项
May 27 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 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
Linux下php5.4启动脚本
2014/08/03 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php session 写入数据库
2016/02/13 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php函数式编程简单示例
2019/08/08 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
中班中秋节活动反思
2014/02/18 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang