【React】第八部分 react脚手架安装以及react脚手架配置代理
【React】第八部分 react脚手架安装以及react脚手架配置代理
【React】第八部分 react脚手架安装以及react脚手架配置代理
文章目录
- 【React】第八部分 react脚手架安装以及react脚手架配置代理
- 8. react脚手架安装以及react脚手架配置代理
- 8.1 react脚手架安装
- 8.1.1 什么是脚手架
- 8.1.2 安装步骤
- 8.2 react脚手架配置代理
- 方法一
- 方法二
- 总结
8. react脚手架安装以及react脚手架配置代理
8.1 react脚手架安装
8.1.1 什么是脚手架
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置(语法检查、jsx编译、devServer…)
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
8.1.2 安装步骤
第一步:全局安装 npm i -g create-react-app
第二步:在项目目录下使用create-react-app hello-react
第三步:进入项目文件夹cd hello-react
第四步:启动项目npm start
如果运行的时候卡住了,可以去看我专栏里遇到的问题
8.2 react脚手架配置代理
方法一
在package.json中追加如下配置
// 目标服务器
"proxy":"http://localhost:5000"
说明:
- 优点:配置简单,前端请求资源时可以不加任何前缀。
- 缺点:不能配置多个代理。
- 工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
方法二
-
第一步:创建代理配置文件
在src下创建配置文件:src/setupProxy.js ,文件名不能修改
-
编写
setupProxy.js
配置具体代理规则:const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', { // 所有带有/api1前缀的请求都会转发给5000target: 'http://localhost:5000', // 目标服务器changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000changeOrigin默认值为false,但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}})) }
说明:
- 优点:可以配置多个代理,可以灵活的控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须加前缀。
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!