本文要實現的是:使用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.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正不正確