新聞中心
本文要實現(xiàn)的是:使用vue-cli搭建的項目在開發(fā)時配置跨域,上線后不做任何任何修改,接口也可以訪問
成都地區(qū)優(yōu)秀IDC服務器托管提供商(成都創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的雅安電信機房,四川各地服務器托管,雅安電信機房、多線服務器托管.托管咨詢專線:18982081108
production:產(chǎn)品 生產(chǎn)環(huán)境
development:開發(fā) 開發(fā)環(huán)境
1.開發(fā)環(huán)境設置跨域使用工具:
- vue-cli自帶的配置配置
- 目錄 /config/index.js
//自行復制黏貼 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后臺api changeOrigin: true, //是否跨域 // secure: true, pathRewrite: { '^/apis': '' //需要rewrite的, } } }
注意:以上配置只有在生產(chǎn)環(huán)境下有效,你打包之后就不起作用了
這樣就存在一個問題,你的接口都是/apis開頭的,打包之后部署到服務器要去除/apis,才能正常訪問后臺接口,如何解決呢?
2.生產(chǎn)環(huán)境設置跨域
使用工具 axios 中文文檔地址
思路
解決的思路是這樣的:
首先,axios有一個baseURL的屬性,配置了baseURL之后,你訪問接口時就會自動帶上
假設你vue-cli起了一個開發(fā)環(huán)境,地址為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
然后我們要根據(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)境,這個值是webpack設置的
動手操作
假設后臺api的rul是http://sbsb.com:8888/
首先在/config目錄下新建一個文件,我這里叫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)境不同導出不同的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
如果配置過程中出現(xiàn)了問題,自己調試,看看訪問的url正不正確
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當前標題:vue開發(fā)環(huán)境配置跨域的方法步驟
文章路徑:http://fisionsoft.com.cn/article/jocpcc.html