vue開發(fā)環(huán)境配置跨域的方法步驟

更新時(shí)間：2019年01月16日 10:23:20 作者：hyangteng

本文介紹了使用vue-cli搭建的項(xiàng)目在開發(fā)時(shí)配置跨域，上線后不做任何任何修改，接口也可以訪問，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

production：產(chǎn)品生產(chǎn)環(huán)境

development：開發(fā) 開發(fā)環(huán)境

1.開發(fā)環(huán)境設(shè)置跨域使用工具：

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

//自行復(fù)制黏貼
proxyTable: {
 '/apis':{
 target: 'http://10.1.63.26:19080/', // 后臺(tái)api
 changeOrigin: true, //是否跨域
 // secure: true,
 pathRewrite: {
  '^/apis': '' //需要rewrite的,
 }
 }
}

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

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

2.生產(chǎn)環(huán)境設(shè)置跨域

使用工具 axios 中文文檔地址

思路

解決的思路是這樣的：

首先，axios有一個(gè)baseURL的屬性，配置了baseURL之后，你訪問接口時(shí)就會(huì)自動(dòng)帶上

假設(shè)你vue-cli起了一個(gè)開發(fā)環(huán)境，地址為http://localhost:8080
//例1 當(dāng)不設(shè)置baseURL時(shí)
axios.get('/user') //訪問/user相當(dāng)于訪問 http://localhost:8080/user

//例2 
axios.baseURL='/apis'
axios.get('/user') //訪問/user就相當(dāng)于訪問 http://localhost:8080/apis/user

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

//例4
axios.baseURL='https://sbsb.com/apis'
axios.get('/user') //訪問/user就相當(dāng)于訪問 https://sbsb.com/apis/user

然后我們要根據(jù)現(xiàn)在的環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，配置不同的baseURL

//判斷是否是生產(chǎn)環(huán)境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
//配置不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境，這個(gè)值是webpack設(shè)置的

動(dòng)手操作

假設(shè)后臺(tái)api的rul是http://sbsb.com:8888/

首先在/config目錄下新建一個(gè)文件,我這里叫api.config.js

寫入以下代碼

//判斷是否是生產(chǎn)環(huán)境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于區(qū)分是生產(chǎn)環(huán)境還是開發(fā)環(huán)境
//根據(jù)環(huán)境不同導(dǎo)出不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

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

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

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

如果配置過程中出現(xiàn)了問題，自己調(diào)試，看看訪問的url正不正確

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: