vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
開發(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;} }); } }}
補充知識:vue中axios固定url請求前綴
main.js中添加:
使用方法:
以上這篇vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 完美解決vue 中多個echarts圖表自適應(yīng)的問題2. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法3. 利用CSS制作3D動畫4. 存儲于xml中需要的HTML轉(zhuǎn)義代碼5. Springboot 全局日期格式化處理的實現(xiàn)6. jsp+servlet簡單實現(xiàn)上傳文件功能(保存目錄改進)7. Python的文本常量與字符串模板之string庫8. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程9. SpringBoot+TestNG單元測試的實現(xiàn)10. JAMon(Java Application Monitor)備忘記
