這一個(gè)問題困擾了我許久，怎么用vue搭建開發(fā)環(huán)境并且可以請(qǐng)求本地?cái)?shù)據(jù)逊移，因?yàn)閣ebpack-dev-server在編譯vue的時(shí)候會(huì)默認(rèn)開啟一個(gè)端口，本地的服務(wù)器肯定也會(huì)擁有一個(gè)端口龙填，那么不同端口的請(qǐng)求又為跨域請(qǐng)求胳泉，此時(shí)又不能把端口改為相同，因?yàn)檫@樣會(huì)造成端口沖突岩遗，當(dāng)然肯定不考慮跨域jsonp之類扇商，因?yàn)檫@樣做的話上線又要改請(qǐng)求方式，十分麻煩宿礁，那么應(yīng)該怎么做呢案铺？ 后來(lái)無(wú)意間看到vue配置里面有一個(gè)開啟代理的配置 即把請(qǐng)求的地址轉(zhuǎn)發(fā)到指定的地址，并且允許跨域請(qǐng)求 如下：
此時(shí)找到config文件中的index.js 窘拯，拉到底部 找到 dev：{ 里面是一些端口的配置} 在里面添加上如下配置
dev: {
env: require('./dev.env'),
port: 9999,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 這里用的是vue-cli腳手架,默認(rèn)proxyTable:{} ,內(nèi)容為空 只需要配置這個(gè)參數(shù)即可
'/webapi': {
target: 'http://im.ivymei.com',
changeOrigin: true,
pathRewrite: {
'^/webapi': '/webapi'
}
}
},
cssSourceMap: false,
}
'/webapi' 代表 你以什么為開始請(qǐng)求數(shù)據(jù) // 此時(shí)我用的是axios
target 代表代理地址 //即 如果 this.$http.get('/webapi').then() 此時(shí)會(huì)變成http://www.baidu.com/webapi
changeOrigin: true, // 表示允許跨域 pathRewrite: { '^/webapi': '/webapi' // 配置 可要可不要 }
至此就可以愉快的請(qǐng)求本地?cái)?shù)據(jù)了 8080端口也能請(qǐng)求80端口的數(shù)據(jù)了 最終打包上線也不需要改任何代碼红且。
