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)文章
JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼分享
這篇文章主要介紹了JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼，效果很酷炫，也很具有實(shí)用價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
最近在一個(gè)微信公眾號(hào)中用到了swiper圖片輪播插件。接下來(lái)為大家介紹插件的用法,需要的朋友可以參考下2017-01-01
基于zepto.js實(shí)現(xiàn)手機(jī)相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了基于zepto.js實(shí)現(xiàn)手機(jī)相冊(cè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了原生js編寫(xiě)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript滿(mǎn)天星導(dǎo)航欄實(shí)現(xiàn)方法
本篇文章給大家分享了JavaScript滿(mǎn)天星導(dǎo)航欄實(shí)現(xiàn)方法，以前也介紹過(guò)很多關(guān)于特效導(dǎo)航的制作方法，對(duì)此有興趣的朋友參考學(xué)習(xí)下。2018-03-03
前端實(shí)現(xiàn)文本對(duì)比并高亮顯示差異的方法
文本對(duì)比是一個(gè)常見(jiàn)需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫(kù)和diff2html工具來(lái)實(shí)現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí)，您遇到過(guò)麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開(kāi)源 Mozilla 瀏覽器上時(shí)的常見(jiàn)問(wèn)題。首先討論跨瀏覽器開(kāi)發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
ToolTip 通過(guò)Js實(shí)現(xiàn)代替超鏈接中的title效果
ToolTip 通過(guò)Js實(shí)現(xiàn)代替超鏈接中的title效果，需要的朋友可以參考下。2011-04-04
微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
談?wù)凧avaScript類(lèi)型系統(tǒng)之Math
Math 對(duì)象并不像 Date 和 String 那樣是對(duì)象的類(lèi)，因此沒(méi)有構(gòu)造函數(shù) Math()，像 Math.sin() 這樣的函數(shù)只是函數(shù)，不是某個(gè)對(duì)象的方法。您無(wú)需創(chuàng)建它，通過(guò)把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法2016-01-01