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调用Activex控件的事件的实现方法
Apr 11 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP实现微信对账单处理
2018/10/01 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python之list对应元素求和的方法
2018/06/28 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
英语教师自荐信
2014/05/26 职场文书
2015年加油站工作总结
2015/05/13 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL