vue接口请求地址前缀本地开发和线上开发设置方式_vue如何获取API - CSDN文库

28 浏览量更新于2023-03-16 评论收藏 94KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

开发环境 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请求前缀请求前缀

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38730977

粉丝: 5
资源: 875

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈