vue-cli 搭建的項(xiàng)目處理不同環(huán)境下請(qǐng)求不同域名的問(wèn)題

Kross 發(fā)布于2019-08-22 15:25 / 3739人閱讀

摘要：不知大家都是怎么處理這個(gè)問(wèn)題，歡迎分享。文章不好，也僅是分享我的一些觀點(diǎn)，感謝觀看

使用 vue-cli 開發(fā)項(xiàng)目過(guò)程中, 根據(jù)開發(fā)環(huán)境和正式環(huán)境不同, 我們往往需要請(qǐng)求不同域名下的后臺(tái)接口, 這時(shí)候, 該怎么去設(shè)置, 達(dá)到同一種寫法可以根據(jù)環(huán)境不同而自動(dòng)切換請(qǐng)求域名呢? 本文將會(huì)介紹兩種配置方式.本文中所有請(qǐng)求都是使用 axios

一

1、修改 config/dev.env.js (開發(fā)環(huán)境的配置)

"use strict"
const merge = require("webpack-merge")
const prodEnv = require("./prod.env")

module.exports = merge(prodEnv, {
  NODE_ENV: ""development"",
  API_HOST: ""http://localhost:3000"" // 開發(fā)環(huán)境接口地址(這里是增加的內(nèi)容)
})

2、 修改 config/prod.env.js (正式環(huán)境的配置)

"use strict"
module.exports = {
  NODE_ENV: ""production"",
  API_HOST: ""http://localhost:8888""  // 正式環(huán)境接口地址(這里是增加的內(nèi)容)
}

3、 使用 axios 發(fā)送請(qǐng)求

axios.get(process.env.API_HOST + "/api/userData") // 請(qǐng)求前加上 `process.env.API_HOST`
  .then(data => {
    console.log(data)
  })

二

第二種方法主要使用 axios 的創(chuàng)建實(shí)例的用法在 main.js 配置 axios

import axios from "axios"

const host = process.env.NODE_ENV === "development" ? "dev api host" : "prod api host" // 根據(jù) process.env.NODE_ENV 的值判斷當(dāng)前是什么環(huán)境
const instance = axios.create({
  baseURL: host
})

Vue.prototype.$http = instance

在組件中調(diào)用

this.$http.get("/api/userData")
  .then(data => {
    console.log(data)
  })

個(gè)人一般采用第二種方式，因?yàn)閷懙姆奖?。不知大家都是怎么處理這個(gè)問(wèn)題，歡迎分享。如果文章中有任何問(wèn)題或者有更好的方式，也歡迎指正。

文章不好，也僅是分享我的一些觀點(diǎn)，感謝觀看！

GPU云服務(wù)器云服務(wù)器不同域名的辨別不同的域名后綴不同域名的區(qū)別不同賬號(hào)的域名

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93454.html

相關(guān)文章

基于Vue-cli搭建的項(xiàng)目如何和后臺(tái)交互

摘要：請(qǐng)求實(shí)際發(fā)出去的請(qǐng)求是配置一個(gè)適用于本地和生產(chǎn)環(huán)境的后臺(tái)請(qǐng)求按照上面的配置好以后，本地環(huán)境可以成功的跨域和后臺(tái)交互了。這段時(shí)間在折騰有vue做開發(fā)，之前也用過(guò)，但是大部分都是用一些簡(jiǎn)單的數(shù)據(jù)綁定。踏了很多坑，總結(jié)了一下，希望對(duì)剛剛開始折騰的小伙伴有幫助。常見問(wèn)題一：用vue-cli搭好環(huán)境以后，本地域名和測(cè)試環(huán)境的域名不一致，怎么跨域訪問(wèn)后臺(tái)接口？在config目錄下找到inde...

Yangder 2019-08-22 18:22 評(píng)論0 收藏0
單頁(yè)應(yīng)用的部署方案

摘要：所以單頁(yè)應(yīng)用的部署，需要將所有的頁(yè)面請(qǐng)求都返回，瀏覽器下載了后會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁(yè)面?？偨Y(jié)單頁(yè)應(yīng)用與以前的常規(guī)多頁(yè)面應(yīng)用還是有區(qū)別的，開發(fā)過(guò)程與后端解耦了，同時(shí)會(huì)出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問(wèn)題。本文同步發(fā)布于我的個(gè)人博客上 - 單頁(yè)應(yīng)用的部署方案本文主要簡(jiǎn)單講一下單頁(yè)應(yīng)用的開發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識(shí)及nginx知識(shí)，如果有任何可以在下方評(píng)論留言。單頁(yè)應(yīng)用 SPA（...

yanbingyun1990 2019-07-25 14:45 評(píng)論0 收藏0
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

simon_chen 2019-08-30 15:54 評(píng)論0 收藏0
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

curlyCheng 2019-08-02 13:55 評(píng)論0 收藏0
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

xi4oh4o 2019-08-23 14:09 評(píng)論0 收藏0