vue開發環境配置跨域，一步到位

2021-09-10 01:50:20 字數 1814 閱讀 8012

前端跨域解決方案

production：產品 生產環境

development：開發 開發環境

//自行複製黏貼


proxytable: 


}}
注意：以上配置只有在生產環境下有效，你打包之後就不起作用了

這樣就存在乙個問題，你的介面都是/apis開頭的，打包之後部署到伺服器要去除/apis,才能正常訪問後台介面，如何解決呢？

使用工具 axios

中文文件位址

解決的思路是這樣的：

首先，axios的預設例項有乙個baseurl的屬性，配置了baseurl之後，你訪問介面時就會自動帶上

假設你vue-cli起了乙個開發環境，位址為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=''


axios.get('/user')  //訪問/user就相當於訪問 /user


//例4


axios.defaults.baseurl='/apis'


axios.get('/user')  //訪問/user就相當於訪問 /apis/user
然後我們要根據現在的環境是開發環境還是生產環境，配置不同的baseurl

//判斷是否是生產環境


var ispro = process.env.node_env === 'production' 用於區分是生產環境還是開發環境


//配置不同的baseurl


module.exports =
process.env.node_env用於區分是生產環境還是開發環境，這個值是webpack設定的

假設後台api的rul是
首先在/config目錄下新建乙個檔案,我這裡叫api.config.js

寫入以下**

//判斷是否是生產環境


var ispro = process.env.node_env === 'production' 用於區分是生產環境還是開發環境


//根據環境不同匯出不同的baseurl


module.exports =
然後，在main.js中引入axios和剛才那個檔案

import vue from 'vue'


import axios from 'axios'


import apiconfig from '../config/api.config.js'


axios.defaults.baseurl=apiconfig.baseurl


//axios的其他配置...
這樣配置之後，打包部署到伺服器上也不用再手工去除/apis

如果配置過程**現了問題，自己除錯，看看訪問的url正不正確

autojump 一步到位

建議安裝 zsh 和 homebrew brew install autojump 1.在 zshrc 中找到 plugins 在後面新增 plugins git autojump 2.然後繼續在上述檔案中新增 s brew prefix etc profile.d autojump.sh brew...

SQL索引一步到位

sql索引在資料庫優化中占有乙個非常大的比例，乙個好的索引的設計，可以讓你的效率提高幾十甚至幾百倍，在這裡將帶你一步步揭開他的神秘面紗。1.1 什麼是索引？sql索引有兩種，聚集索引和非聚集索引，索引主要目的是提高了sql server系統的效能，加快資料的查詢速度與減少系統的響應時間 下面舉兩個簡...

cvs 搭建一步到位

1.在windows 7上安裝cvs 伺服器端，cvsnt 2.在win cvsnt service control panel 啟動 cvs和cvslock service 並建立乙個 ropository 名稱這裡為cvs repository 3.在命令列視窗中首先登入cvs 命令如下 cvs...