vue.jpg
一、Axios封裝
安裝Axios
- npm i -S axios
-
在src下新建文件件utils->request.js
image.png
import axios from 'axios'
// 創(chuàng)建axios對象
const request = axios.create({
baseURL: '/',
timeout:5000 //請求超時時間
})
// 請求攔截器
request.interceptors.request.use(config=>{
// 請求攔截
return config
},error=>{
// 異常
return Promise.reject(error)
})
// 響應(yīng)攔截器
request.interceptors.response.use(response=>{
// 響應(yīng)的數(shù)據(jù) response.data
return response
},error=>{
// 異常
return Promise.reject(error)
})
export default request //導(dǎo)出自定義創(chuàng)建的axios對象
二痕支、跨域解決
- 在服務(wù)器端修改端口號為8001
module.exports = {
devServer: {
port: 8001, //端口號
host: 'localhost', //主機(jī)名
https: false, //協(xié)議
open: true, //啟動服務(wù)時自動打開瀏覽器訪問
},
lintOnSave: false //關(guān)閉格式檢查
}
- 客戶端進(jìn)行配置訪問
module.exports = {
devServer: {
port: 8888, //端口號
host: 'localhost', //主機(jī)名
https: false, //協(xié)議
open: true, //啟動服務(wù)時自動打開瀏覽器訪問
proxy: {
// 匹配 /dev-api 開頭的請求采转，
// '/dev-api': {
'/dev-api': {
// 目標(biāo)服務(wù)器, 代理訪問到 https://localhost:8001
// target: 'http://localhost:8001',
target: 'https://localhost:8081',
// 開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端瞬痘，然后發(fā)送請求的數(shù)據(jù)板熊，
// 并同時接收請求的數(shù)據(jù)干签，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題
changOrigin: true, //開啟代理
pathRewrite: {
// 會將 /dev-api 替換為 '',也就是 /dev-api 會移除，
// 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
// '^/dev-api': '',
'/dev-api':''
}
}
}
},
lintOnSave: false, //關(guān)閉格式檢查
productionSourceMap: false // 打包時不會生成.map文件
}
三喘沿、最終配置結(jié)果請看圖
- 在根目錄下新建兩個文件，分別是開發(fā)環(huán)境和生產(chǎn)環(huán)境
.env.development
.env.production
注意：順序不要寫亂了
.env.development下
# 使用 VUE_APP_ 開頭的變量會被 webpack 自動加載
# 接口服務(wù)地址蚜印， 以你自已的為主
VUE_APP_SERVICE_URL = 'http://localhost:8001'
# 定義請求的基礎(chǔ)URL, 方便跨域請求時使用
VUE_APP_BASE_API = '/dev-api'
.env.production下
# 使用 VUE_APP_ 開頭的變量會被webpack自動加載
# 定義請求的基礎(chǔ)URL杜顺，方便跨域請求時使用
VUE_APP_BASE_API = '/pro-api'
- 在vue.config.js進(jìn)行配置
module.exports = {
devServer: {
port: 8888, //端口號
host: 'localhost', //主機(jī)名
https: false, //協(xié)議
open: true, //啟動服務(wù)時自動打開瀏覽器訪問
proxy: {
// 匹配 /dev-api 開頭的請求瞎暑，
// '/dev-api': {
[process.env.VUE_APP_BASE_API]: {
// 目標(biāo)服務(wù)器, 代理訪問到 https://localhost:8001
// target: 'http://localhost:8001',
target: process.env.VUE_APP_SERVICE_URL, // 在 .env.development 中配置的
// 開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端怖竭，然后發(fā)送請求的數(shù)據(jù)可岂，
// 并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題
changOrigin: true, //開啟代理
pathRewrite: {
// 會將 /dev-api 替換為 '',也就是 /dev-api 會移除稚茅，
// 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
// '^/dev-api': '',
['^' + process.env.VUE_APP_BASE_API]:''
}
}
}
},
lintOnSave: false, //關(guān)閉格式檢查
productionSourceMap: false // 打包時不會生成.map文件
}
- 在main.js中動態(tài)獲取環(huán)境
Vue.config.productionTip = process.env.NODE_ENV === 'production'; //production生產(chǎn)環(huán)境 development開發(fā)環(huán)境
-
修改 utils/request.js 文件配置： baseURL: process.env.VUE_APP_BASE_API
image.png
import axios from 'axios'
// 創(chuàng)建axios對象
const request = axios.create({
// 請求配置參考: https://github.com/axios/axios#request-config
// 根據(jù)不同環(huán)境設(shè)置 baseURL, 最終發(fā)送請求時的URL為: baseURL + 發(fā)送請求時寫URL ,
// 比如 get('/test'), 最終發(fā)送請求是: /dev-api/test
// baseURL: '/dev-api',
// baseURL: '/',
// 根目錄下的 .env.development 與 .env.production 中配置 VUE_APP_BASE_API
baseURL: process.env.VUE_APP_BASE_API, // /dev-api/
timeout:5000 //請求超時時間
})
// 請求攔截器
request.interceptors.request.use(config=>{
// 請求攔截
return config
},error=>{
// 異常
return Promise.reject(error)
})
// 響應(yīng)攔截器
request.interceptors.response.use(response=>{
// 響應(yīng)的數(shù)據(jù) response.data
return response
},error=>{
// 異常
return Promise.reject(error)
})
export default request //導(dǎo)出自定義創(chuàng)建的axios對象
- 在public下創(chuàng)建db.json文件
[
{"id":1,"name":"wangcai"},
{"id":2,"name":"lisi"},
{"id":3,"name":"zhangsan"},
{"id":4,"name":"zhaowu"},
{"id":5,"name":"liqiang"}
]
- 在src下創(chuàng)建文件夾（src--api--db.json）
import request from '@/utils/request'
export default{
getList(){
const req = request({
method:'get',
url:'/db.json'
})
return req
}
}
- 進(jìn)行測試數(shù)據(jù)
<script>
import restApi from '@/api/test'
export default {
created() {
this.feachData()
},
methods: {
feachData(){
restApi.getList().then(res=>{
console.log(res.data)
})
}
},
};
</script>
image.png
今天就到此為止，后期會帶來更多豐富的內(nèi)容虹蒋，感謝支持
0.jpg
