vue-cli 搭建的项目处理不同环境下请求不同域名的问题
2024-09-11 19:39:58
使用 vue-cli
开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式.
本文中所有请求都是使用 axios
一、
1、修改 config/dev.env.js
(开发环境的配置)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"http://localhost:3000"' // 开发环境接口地址(这里是增加的内容)
})
2、 修改 config/prod.env.js
(正式环境的配置)
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:8888"' // 正式环境接口地址(这里是增加的内容)
}
3、 使用 axios
发送请求
axios.get(process.env.API_HOST + '/api/userData') // 请求前加上 `process.env.API_HOST`
.then(data => {
console.log(data)
})
二、
第二种方法主要使用 axios
的创建实例的用法
在 main.js
配置 axios
import axios from 'axios' const host = process.env.NODE_ENV === 'development' ? 'dev api host' : 'prod api host' // 根据 process.env.NODE_ENV 的值判断当前是什么环境
const instance = axios.create({
baseURL: host
}) Vue.prototype.$http = instance
在组件中调用
this.$http.get('/api/userData')
.then(data => {
console.log(data)
})
个人一般采用第二种方式,因为写的方便
最新文章
- 检查日期是否为节假日api
- 实现UITextView的placeholder
- Angular.js实现折叠按钮的经典指令.
- GBDT(MART) 迭代决策树简介
- Android APP开发笔记
- hdu3639 强连通
- 用非GUI模式执行测试,jp@gc - PerfMon Metrics Collector会出现无法获取正确数据的解决办法
- Java学习笔记10(面向对象三:接口)
- [微信小程序]编译.wxss出错,2 not found
- centos 7 安装二进制mysql 详细步骤
- Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念
- Visual Studio 2019及其注册码
- 淘宝NPM镜像cnpm
- PyCharm史上最强攻略
- Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA
- PhpStorm 配置本地断点调试
- [UE4]目标是Pawn、Get Player Character
- 【转】MFC WM_CTLCOLOR 消息
- windows下resin的配置部署与调试
- [译]C语言实现一个简易的Hash table(5)
热门文章
- 邮件发送-》http://service.mail.qq.com/cgi-bin/help?subtype=1&;&;id=28&;&;no=1001256
- NOIP 普及组 2014 比例简化
- pyglet--旋转的矩形
- 启动tomcat时报错:java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException:A child container failed during start
- JS基本包装类型之三(String)
- ElasticSearch 索引整体迁移方案
- [python网络编程]使用scapy修改源IP发送请求
- python---cookie模拟登陆和模拟session原理
- springcloud报错集合
- UVALive 4254 Processor(二分)