Shulou(Shulou.com)06/03 Report--

This article mainly introduces the react scaffolding how to configure path aliases, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

React version 16.13.1

1 enter the command npm run eject to generate the config directory under the root of the project

2 Open the webpack.config.js file under confilg and find the following location

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 modify the following, and then restart the project

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 | | {}), / / File path alias'@': path.resolve (_ _ dirname,'.. / src'),'@ view': path.resolve (_ _ dirname,'. / src/view'),}, configure proxy:

Simple version configuration:

Add "proxy": "http://localhost:4000"" directly to package.json

Full version configuration:

(1)。 Download: yarn add http-proxy-middleware

(2)。 Create: setupProxy.js under the src directory, with the following contents:

Const proxy = require ('http-proxy-middleware') module.exports = function (app) {app.use (proxy.createProxyMiddleware (' / api', {/ / with api is the request to be forwarded target: 'http://localhost:4000', / / here is the server address changeOrigin: true,// is Boolean, if it is true, the local server will receive your request and send it on your behalf PathRewrite: {'^ / api':'}})}

3. Note: after configuring the proxy for react scaffolding, front-end resources will be requested first when requesting resources, but no more back-end resources will be requested.

Thank you for reading this article carefully. I hope the article "how to configure path aliases for react scaffolding" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.