vue開發環境配置跨域，一步到位

shmily 發布于2019-08-23 14:44 / 939人閱讀

摘要：本文要實現的是使用搭建的項目在開發時配置跨域，上線后不做任何任何修改，接口也可以訪問閱讀時間需要三分鐘產品生產環境開發開發環境開發環境設置跨域使用工具自帶的配置配置目錄自行復制黏貼后臺是否跨域需要的注意以上配置只有在生產環境下有效，你打

本文要實現的是：使用vue-cli搭建的項目在開發時配置跨域，上線后不做任何任何修改，接口也可以訪問

閱讀時間需要三分鐘

production：產品生產環境

development：開發開發環境

1.開發環境設置跨域

使用工具：vue-cli自帶的配置

配置目錄 /config/index.js

//自行復制黏貼
proxyTable: {
  "/apis":{
    target: "http://10.1.63.26:19080/",  // 后臺api
    changeOrigin: true,  //是否跨域
    // secure: true,
    pathRewrite: {
      "^/apis": ""   //需要rewrite的,
    }
  }
}

注意：以上配置只有在生產環境下有效，你打包之后就不起作用了

這樣就存在一個問題，你的接口都是/apis開頭的，打包之后部署到服務器要去除/apis,才能正常訪問后臺接口，如何解決呢？

2.生產環境設置跨域

使用工具 axios 中文文檔地址

思路

解決的思路是這樣的：

首先，axios的默認實例有一個baseURL的屬性，配置了baseURL之后，你訪問接口時就會自動帶上

假設你vue-cli起了一個開發環境，地址為http://localhost:8080
//例1 當不設置baseURL時
axios.get("/user")  //訪問/user相當于訪問 http://localhost:8080/user

//例2 
axios.defaults.baseURL="/apis"
axios.get("/user")  //訪問/user就相當于訪問 http://localhost:8080/apis/user

//例3
axios.defaults.baseURL="https://sbsb.com"
axios.get("/user")  //訪問/user就相當于訪問 https://sbsb.com/user

//例4
axios.defaults.baseURL="https://sbsb.com/apis"
axios.get("/user")  //訪問/user就相當于訪問 https://sbsb.com/apis/user

然后我們要根據現在的環境是開發環境還是生產環境，配置不同的baseURL

//判斷是否是生產環境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于區分是生產環境還是開發環境
//配置不同的baseURL
module.exports = {
    baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}

process.env.NODE_ENV用于區分是生產環境還是開發環境，這個值是webpack設置的

動手操作

假設后臺api的rul是http://sbsb.com:8888/

首先在/config目錄下新建一個文件,我這里叫api.config.js
寫入以下代碼

//判斷是否是生產環境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于區分是生產環境還是開發環境
//根據環境不同導出不同的baseURL
module.exports = {
    baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}

然后，在main.js中引入axios和剛才那個文件

//main.js
import Vue from "vue"
import axios from "axios"
import apiConfig from "../config/api.config.js"
axios.defaults.baseURL=apiConfig.baseURL
//axios的其他配置...

這樣配置之后，打包部署到服務器上也不用再手工去除/apis

如果配置過程中出現了問題，自己調試，看看訪問的url正不正確

GPU云服務器云服務器開發環境配置 python開發環境配置 app開發環境配置 php開發環境配置

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101055.html

Nginx

摘要：此外，其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發的，第一個公開版本發布于年月日。 keepalived+nginx 實現高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機（啟用網卡二并使用橋接模式）:A服務器：192.168.0.103 主B服務器：192.168.0.104 主（備）前端工程師學習 Nginx ...

syoya 2019-07-25 14:06 評論0 收藏0
vue開發微信商城項目總結之三--根據不同的開發環境做配置

摘要：項目是基于搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口會跨域，以上需求就引發了一些問題，問題一測試環境包括開發環境，并且開發環境跨域，預生產環境，生產環境，有項目是基于vue-cli搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口...

Magicer 2019-08-22 11:10 評論0 收藏0
vue-cli 3.x配置跨域代理

摘要：需求上是我們只需要在開發環境配置跨域代理，所以我們可以在開發環境的配置上加上能夠代理上的環境變量即可。修改的配置將改為這里依然是采用的來做的代理配置，一些自定義配置可以移步到官網去進行參考。寫在前面 vue-cli 3.x 的beta版本已經發布了一段時間，很早就像體驗一番一直找不到時間。這些日子剛好有空就想著依照網上的一些例子練下手，剛一上手就踩到坑了。3.x 版本對整個項目的構建...

weakish 2019-08-22 16:30 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0