使用vue的同學們大都是基于vue-cli來搭建項目的，vue-cli中的配置全面強大。
// 常用的命令npm run dev // 本地熱更新模式npm run build //生產模式 會在根目錄下打包出一個dist文件夾，直接放在服務器上就可以使用了
開發階段與后臺同學進行數據交互（調試接口） 本機與服務器之間會出現跨域問題
跨域報錯
解決辦法
在npm run dev執行后，項目會在本地node中執行。vue-cli中提供了非常方便的代理方式。
直接上代碼 根目錄/config/index.js 中，搜索 proxyTable ，把它改成如下對象
proxyTable: { '/api': { //使用"/api"來代替"http://baidu.com" target: 'http://baidu.com', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': '/' //路徑重寫 } } }這段代碼的意思是用 /api 帶代替請求地址的域名
為了方便使用，需要不同環境下的不同配置
根目錄/config/dev.env.js 這里面是本地dev環境的配置
module.exports = merge(prodEnv, { // 你的其他的一些配置。。。 // 。。。 // 本地調試環境下的請求地址/api // 對應代理的/api配置 API_ROOT: '"/api"',})根目錄/config/prod.env.js 這里面是生產build環境的配置
module.exports = { // 你的其他的一些配置。。。 // 。。。 API_ROOT:'"實際生產環境的請求地址"',}修改類似執行配置都需要
重新 npm run dev
重新 npm run dev
重新 npm run dev
配置完工后，我們找到 src/main.js
這里用axios為例
import Vue from 'vue'import axios from 'axios'// process.env.API_ROOT就得到了上面不同環境下的API_ROOTconst baseUrl = process.env.API_ROOT// 把baseUrl掛載到Vue原型上，方便組件內部使用Vue.prototype.baseUrl = baseUrl;// axios也掛載到原型上 this.$http就指向axiosVue.prototype.$http = axios;
OK，一切配置就緒，我們在任一地方就可以使用了
// 組件內使用axios// 不同的配置下，this.baseUrl的值就不同this.$http.post(`${this.baseUrl}/aaa/xxx`, { id: 123}).then(res => { // 請求成功。。。})所有配置已完成
需要注意的是
本地環境下查看瀏覽器的Network
本地環境下，請求的ip地址變成了本機的ip，后面還會跟上一個 /api ，說明代理是成功的。
例如瀏覽器上請求地址（這是代理地址）
192.168.0.0:8080/api/xxx
但其實真正請求的地址是
根目錄/config/index.js配置的地址 + /xxx
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
