vue-cli 搭建的項目處理不同環境下請求不同域名的問題

Kross 發布于2019-08-22 15:25 / 3741人閱讀

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

使用 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云服務器不同域名的辨別不同的域名后綴不同域名的區別不同賬號的域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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