文章寫時react版本16.13.1

1輸入命令 npm run ehttp://www.cppcns.comject 在專案根目錄下生成config目錄

2在confilg下開啟webpack.config.檔案找到如下位置

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',// 檔案路徑別名
   '@'www.cppcns.com
 
: path.resolve(__dirname,'../src'),'@view': path.resolve(__dirname,'../src/view'),

配置代理：

簡單版配置：

package.json中直接新增："proxy": "http://localhost:4000"

完整版本配置：
(1).下載：yarn add http-proxy-middleware
(2).在src目錄下建立：setupProxy.js，內容如下：

  const proxy = require('http-proxy-middleware')
  module.exports = function(app) {
   app.use(
    proxy.createProxyMiddleware('/api',{  //帶有api是需要轉發的請求 
     target: 'http://localhost:4000',// 這裡是伺服器地址
     changeOrigin: true,//值為布林值,為true時,客棧
 
 本地就會虛擬一個伺服器接收你的請求並代你傳送該請求,pathRewrite: {'^/api': ''}
    })
   )
  }

3.備註：react腳手架的配置代理後，在請求資源時會優先請求前端資源，若沒有再請求後端資源。

到此這篇關於react腳手架配置路徑別名的方法的文章就介紹到這了,更多相關react腳手架配置路徑別名內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！