開發(fā)環(huán)境 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'’ //本地請求前綴})

線上開發(fā)環(huán)境 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;} }); } }}

補(bǔ)充知識：vue中axios固定url請求前綴

main.js中添加：

使用方法：

以上這篇vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。