問題：vue 項(xiàng)目配置反向代理導(dǎo)致項(xiàng)目白屏

一、現(xiàn)象描述

添加反向代理代碼后，前端運(yùn)行白屏

// 設(shè)置baseURL，8888是后端端口號，前端請求默認(rèn)發(fā)送到baseURL的地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
// 全局注冊，之后可在其他組件中通過 this.$axios 發(fā)送數(shù)據(jù)
Vue.prototype.$axios = axios

二、問題分析

通過F12查看控制臺

Uncaught TypeError: Cannot set properties of undefined (setting 'baseURL')

Uncaught TypeError: Cannot read properties of undefined 是一個 JavaScript 運(yùn)行時錯誤，它表示試圖訪問一個未定義（undefined）對象的屬性。訪問對象是一個不存在的變量或者對象的屬性。

axios.defaults.baseURL = 'http://localhost:8888/api'

出問題的是這句話，注釋掉就能顯示。

代碼解釋（熟悉的同學(xué)可略過此節(jié)）

axios.defaults.baseURL = 'http://localhost:8888/api' 是一行JavaScript代碼，通常用于配置Axios庫的默認(rèn)基礎(chǔ)URL。

1. axios: Axios 是一個基于 Promise 的 HTTP 客戶端，用于瀏覽器和 Node.js。它允許你發(fā)出GET、POST等HTTP請求。

2. defaults: 這是Axios對象的一個屬性，用于設(shè)置Axios的默認(rèn)配置。

3. baseURL: 這是Axios默認(rèn)配置中的一個屬性，用于設(shè)置請求的基礎(chǔ)URL。這意味著當(dāng)你使用axios發(fā)起請求時，如果請求的URL以baseURL開始，那么你不需要重復(fù)寫baseURL。

4. 'http://localhost:8888/api': 這是你設(shè)置的基礎(chǔ)URL。這意味著當(dāng)你使用axios發(fā)起請求時，除非你明確指定了不同的URL，否則都會基于這個URL。例如，如果你發(fā)起一個GET請求，而請求的URL是'/users'，那么實(shí)際發(fā)送的請求URL會是'http://localhost:8888/api/users'。

設(shè)置基礎(chǔ)URL的主要目的是為了簡化代碼和提高可讀性。例如，如果你有一個API端點(diǎn)是'/users'，那么你可以這樣發(fā)起請求：

axios.get('/users') ?.then(response => { ?console.log(response.data); ?}) ?.catch(error => { ?console.error(error); ?});

而不是這樣：

axios.get('http://localhost:8888/api/users') ?.then(response => { ?console.log(response.data); ?}) ?.catch(error => { ?console.error(error); ?});

通過設(shè)置基礎(chǔ)URL，你可以避免在每個請求中重復(fù)寫相同的URL前綴。

三、解決方案

1.檢查變量是否定義

2.使用默認(rèn)參數(shù)

3.使用鏈?zhǔn)奖磉_(dá)

博主的項(xiàng)目實(shí)際解決方法是通過

import axios from 'axios'

代替

// var axios = require('axios')

根本原因分析，先挖個坑。