使用 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)
})

个人一般采用第二种方式,因为写的方便

vue-cli 搭建的项目处理不同环境下请求不同域名的问题的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. go语言环境搭建+sublime text3(windows环境下)

    感觉有点坑,整了一下午~搞定 go语言环境搭建+sublime text3(windows环境下) 1.安装sublime text3 2.安装go语言程序包 3.测试go语言是否安装成功     键 ...

  3. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  4. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  5. VUE环境搭建,项目配置(Windows下)

    公司想做官网,框架我自己定,然后就选了vue,那现在就来加深一遍vue的环境的搭建吧 1.安装node.js,这里就不再多说了,很简单,如果之前有安装就不用再安装了,可node -v查看node版本 ...

  6. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

  7. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  8. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  9. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

随机推荐

  1. zoj 3195(LCA加强版)

    传送门:Problem 3195 https://www.cnblogs.com/violet-acmer/p/9686774.html 题意: 给一个无根树,有q个询问,每个询问3个点(a,b,c) ...

  2. Linux命令之grep

    grep命令 用处:文本搜索工具 用法:grep + ‘查找关键字的名字’ + 文件名 示例: 还在profile里面查找then 干净利落强大,有关then的信息显示

  3. Java中Jdom解析XML

    JDOM与DOM类似,也是一组用于解析XML的API,它本身不是一个解析器,默认的它内置了Apache的Xerces解析器:JDOM与DOM不同的是,DOM是跨语言的一套API,Java世界中有很多D ...

  4. XML文件详解以及解析

    转自:https://blog.csdn.net/com_ma/article/details/73277535 一.xml基础详解: 1.概述: xml:即可扩展标记语言,xml是互联网数据传输的重 ...

  5. toolbar 相关

    1.改变toolbar 返回键和扩展按钮颜色,只需要在style文件中添加这一行即可: 2.toolbar的title是否显示是这样控制的:

  6. 使用paramiko远程执行命令、下发文件

    写部署脚本时,难免涉及到一些远程执行命令或者传输文件. 之前一直使用sh库,调用sh.ssh远程执行一些命令,sh.scp传输文件,但是实际使用中还是比较麻烦的,光是模拟用户登陆这一点,还需要单独定义 ...

  7. VS设置以管理员方式运行

    一直以为VS不能直接以管理员方式运行,原来它是在高级里的.

  8. pyqt5 添加属性-类方法用属性形式访问

    方法一 装饰器法 import sys from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout,QLab ...

  9. Java SE之For增强与Iterator遍历器提取数据(附Map.Entry)

    增强for循环: 1.操作数组 2.操作List集合 3.操作Map集合    1.map.values()法    2.map.keySet()法  [传统方法]    3.Map.Entry法   ...

  10. 【洛谷P1052【NOIP2005提高T2】】过河

    题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...