react腳手架配置路徑別名的方法
文章寫(xiě)時(shí)react版本16.13.1
1輸入命令 npm run eject 在項(xiàng)目根目錄下生成config目錄
2在confilg下打開(kāi)webpack.config.js文件找到如下位置
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
3修改如下,然后重啟項(xiàng)目
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
// 文件路徑別名
'@': path.resolve(__dirname, '../src'),
'@view': path.resolve(__dirname, '../src/view'),
},
配置代理:
簡(jiǎn)單版配置:
package.json中直接添加:"proxy": "http://localhost:4000"
完整版本配置:
(1).下載:yarn add http-proxy-middleware
(2).在src目錄下創(chuàng)建:setupProxy.js,內(nèi)容如下:
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy.createProxyMiddleware('/api', { //帶有api是需要轉(zhuǎn)發(fā)的請(qǐng)求
target: 'http://localhost:4000', // 這里是服務(wù)器地址
changeOrigin: true,//值為布爾值, 為true時(shí), 本地就會(huì)虛擬一個(gè)服務(wù)器接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求,
pathRewrite: {'^/api': ''}
})
)
}
3.備注:react腳手架的配置代理后,在請(qǐng)求資源時(shí)會(huì)優(yōu)先請(qǐng)求前端資源,若沒(méi)有再請(qǐng)求后端資源。
到此這篇關(guān)于react腳手架配置路徑別名的方法的文章就介紹到這了,更多相關(guān)react腳手架配置路徑別名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript判斷文件是否存在(客戶(hù)端/服務(wù)器端)
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶(hù)端、服務(wù)器端,遠(yuǎn)程文件,示例代碼如下,需要的朋友可以參考下2014-09-09
php main 與 iframe 相互通訊類(lèi)(js+php同域/跨域)
這篇文章主要介紹了php main 與 iframe 相互通訊類(lèi)(js+php同域/跨域),需要的朋友可以參考下2017-09-09
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)?lái)一篇淺談Javascript中的函數(shù)、this以及原型。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件,但是得到的結(jié)果卻不是想要的,下面有個(gè)不錯(cuò)的示例,可以為大家詳細(xì)分解下2014-04-04
解決idea開(kāi)發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問(wèn)題
這篇文章主要介紹了解決idea開(kāi)發(fā)遇到j(luò)avascript動(dòng)態(tài)添加html元素時(shí)中文亂碼的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面div元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js通過(guò)八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js通過(guò)八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03

