vue-cli 搭建的项目处理不同环境下请求不同域名的问题

使用 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)})
复制代码

个人一般采用第二种方式，因为写的方便。不知大家都是怎么处理这个问题，欢迎分享。如果文章中有任何问题或者有更好的方式，也欢迎指正。

文章不好，也仅是分享我的一些观点，感谢观看！

转载于:https://juejin.im/post/5aaa06dc5188255574596c68

vue-cli 搭建的项目处理不同环境下请求不同域名的问题相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
如何完整的搭建一个项目的开发环境？
本章节主要说的是如何完整的搭建一个项目的开发环境一.安装vue脚手架首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架,使用:cnpm i -g @vue/cli 命令进 ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
区块链 Hyperledger - 超级账本项目在centos7环境下的安装与部署
Hyperledger - 超级账本项目在centos7环境下的安装与部署 Hyperledger 项目是开源界面向开放.标准区块链技术的首个重要探索,在 Linux 基金会的支持下,吸引了众多科技和 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问
打开项目build下index.js文件,将localhost改为 0.0.0.0,port端口号改不改都行,只要保证这个端口号没有被占用即可. 然后打开项目package.json文件,找到将红框 ...

vue-cli 搭建的项目处理不同环境下请求不同域名的问题

一

二

vue-cli 搭建的项目处理不同环境下请求不同域名的问题相关推荐

最新文章

热门文章