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

Kross 发布于2019-08-22 15:25 / 3660人阅读

摘要：不知大家都是怎么处理这个问题，欢迎分享。文章不好，也仅是分享我的一些观点，感谢观看

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

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

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

云服务器 GPU云服务器不同域名的辨别不同的域名后缀不同域名的区别不同账号的域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93454.html

基于Vue-cli搭建的项目如何和后台交互

摘要：请求实际发出去的请求是配置一个适用于本地和生产环境的后台请求按照上面的配置好以后，本地环境可以成功的跨域和后台交互了。这段时间在折腾有vue做开发，之前也用过，但是大部分都是用一些简单的数据绑定。踏了很多坑，总结了一下，希望对刚刚开始折腾的小伙伴有帮助。常见问题一：用vue-cli搭好环境以后，本地域名和测试环境的域名不一致，怎么跨域访问后台接口？在config目录下找到inde...

Yangder 2019-08-22 18:22 评论0 收藏0
单页应用的部署方案

摘要：所以单页应用的部署，需要将所有的页面请求都返回，浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的，开发过程与后端解耦了，同时会出现跨域鉴权以及应用部署的问题。本文同步发布于我的个人博客上 - 单页应用的部署方案本文主要简单讲一下单页应用的开发及部署方法，默认你懂一些服务端知识及nginx知识，如果有任何可以在下方评论留言。单页应用 SPA（...

yanbingyun1990 2019-07-25 14:45 评论0 收藏0
vue项目搭建以及全家桶的使用详细教程

摘要：前言是现阶段很流行的前端框架，很多人通过官方文档的学习，对的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程对前言 vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎...

simon_chen 2019-08-30 15:54 评论0 收藏0
vue项目搭建以及全家桶的使用详细教程

摘要：前言是现阶段很流行的前端框架，很多人通过官方文档的学习，对的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程对前言 vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎...

curlyCheng 2019-08-02 13:55 评论0 收藏0
vue项目搭建以及全家桶的使用详细教程

摘要：前言是现阶段很流行的前端框架，很多人通过官方文档的学习，对的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程对前言 vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎...

xi4oh4o 2019-08-23 14:09 评论0 收藏0