- production：產(chǎn)品 生產(chǎn)環(huán)境
- development：開發(fā) 開發(fā)環(huán)境
1够挂、開發(fā)環(huán)境設置跨域
- 使用工具：vue-cli自帶的配置
-
配置目錄 /config/index.js
image.png
//自行復制黏貼
proxyTable: {
'/apis':{
target: 'http://10.1.63.26:19080/', // 后臺api
changeOrigin: true, //是否跨域
// secure: true,
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
注意：以上配置只有在生產(chǎn)環(huán)境下有效姚建，打包后就不起作用了
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.defaults.baseURL='/apis'
axios.get('/user') //訪問/user就相當于訪問 http://localhost:8080/apis/user
//例3
axios.defaults.baseURL='https://sbsb.com'
axios.get('/user') //訪問/user就相當于訪問 https://sbsb.com/user
//例4
axios.defaults.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設置的
然后，在main.js中引入axios和剛才那個文件
//main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.defaults.baseURL=apiConfig.baseURL
//axios的其他配置...
這樣配置之后草冈，打包部署到服務器上也不用再手工去除/apis
