react腳手架配置路徑別名的方法
更新時間：2021年09月23日 11:04:12 作者：JeTanO
本文主要介紹了react腳手架配置路徑別名的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
文章寫時react版本16.13.1
1輸入命令 npm run eject 在項目根目錄下生成config目錄
2在confilg下打開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修改如下，然后重啟項目
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'),
},
配置代理：
簡單版配置：
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ā)的請求
target: 'http://localhost:4000', // 這里是服務器地址
changeOrigin: true,//值為布爾值, 為true時, 本地就會虛擬一個服務器接收你的請求并代你發(fā)送該請求,
pathRewrite: {'^/api': ''}
})
)
}
3.備注：react腳手架的配置代理后，在請求資源時會優(yōu)先請求前端資源，若沒有再請求后端資源。
到此這篇關于react腳手架配置路徑別名的方法的文章就介紹到這了,更多相關react腳手架配置路徑別名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現(xiàn)可調(diào)整倒計時間代碼，效果很酷炫，也很具有實用價值，感興趣的小伙伴們可以參考一下2015-08-08
最近在一個微信公眾號中用到了swiper圖片輪播插件。接下來為大家介紹插件的用法,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了基于zepto.js實現(xiàn)手機相冊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了原生js編寫貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章給大家分享了JavaScript滿天星導航欄實現(xiàn)方法，以前也介紹過很多關于特效導航的制作方法，對此有興趣的朋友參考學習下。2018-03-03
文本對比是一個常見需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫和diff2html工具來實現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-09-09
ibm官方資料把應用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應用程序在 Mozilla 上運行時，您遇到過麻煩嗎？本文討論了將應用程序遷移到基于開源 Mozilla 瀏覽器上時的常見問題。首先討論跨瀏覽器開發(fā)的基本技術，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04
ToolTip 通過Js實現(xiàn)代替超鏈接中的title效果
ToolTip 通過Js實現(xiàn)代替超鏈接中的title效果，需要的朋友可以參考下。2011-04-04
微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
Math 對象并不像 Date 和 String 那樣是對象的類，因此沒有構(gòu)造函數(shù) Math()，像 Math.sin() 這樣的函數(shù)只是函數(shù)，不是某個對象的方法。您無需創(chuàng)建它，通過把 Math 作為對象使用就可以調(diào)用其所有屬性和方法2016-01-01