溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue開發環境配置跨域的方法步驟

發布時間:2020-10-13 19:31:43 來源:腳本之家 閱讀:234 作者:hyangteng 欄目:web開發

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

production:產品 生產環境

development:開發 開發環境

1.開發環境設置跨域使用工具:

  • vue-cli自帶的配置配置
  • 目錄 /config/index.js

vue開發環境配置跨域的方法步驟

//自行復制黏貼
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.baseURL='/apis'
axios.get('/user') //訪問/user就相當于訪問 http://localhost:8080/apis/user

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

//例4
axios.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.baseURL=apiConfig.baseURL
//axios的其他配置...

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女