本文要實現的是：使用vue-cli搭建的項目在開發時配置跨域，上線后不做任何任何修改，接口也可以訪問
production：產品 生產環境
development：開發 開發環境
1.開發環境設置跨域使用工具：
//自行復制黏貼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//例3axios.baseURL='https://sbsb.com'axios.get('/user') //訪問/user就相當于訪問 https://sbsb.com/user//例4axios.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用于區分是生產環境還是開發環境//配置不同的baseURLmodule.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用于區分是生產環境還是開發環境//根據環境不同導出不同的baseURLmodule.exports = { baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'}然后，在main.js中引入axios和剛才那個文件
//main.jsimport Vue from 'vue'import axios from 'axios'import apiConfig from '../config/api.config.js'axios.baseURL=apiConfig.baseURL//axios的其他配置...
這樣配置之后，打包部署到服務器上也不用再手工去除/apis
如果配置過程中出現了問題，自己調試，看看訪問的url正不正確
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
