❀官网
1、安装脚手架:npm install -g create-react-app
2、查看版本:create-react-app -V
!!!注意 Node版本必须是14以上,不然会报以下错误。
3、创建react项目(项目名不能包含大写字母):npx create-react-app <项目名称>
- npx 是 npm 5.2+ 附带的 package 运行工具。
- create-react-app 创建的项目默认无法看到 webpack 的相关配置,如果想要配置 webpack,需要执行
npm run eject
命令
4、运行 react 项目:npm start
5、react中使用video标签显示本地视频不生效问题:
使用require进行引入路径即可。
<video className="videoStyle" src={require('./video/3.mp4')} autoPlay muted loop></video>
6、重写脚手架的配置(参考链接):
- tips: react-app-rewired@2.x 版本需要搭配
customize-cra
使用。 - 安装:
npm i react-app-rewired customize-cra --save-dev
- 在根目录下新建文件
config-overrides.js
,写入代码:module.exports = function override(config, env) { return config }
- 重写
package.json
中的配置:
7、react项目本地代理:
create-react-app
脚手架若在2.0版本以下
:- 直接在
package.json
中配置:"proxy":{ "/api":{ "target":"http://127.0.0.1:3000", # 代理地址 "changeOrigin": true, # 是否允许跨域 "pathRewrite": { # 重写路径 "^/api": "/" }, } }
- 直接在
create-react-app
脚手架若在2.0版本以上
配置一个代理:- 直接在
package.json
中配置:"proxy": 'http://127.0.0.1:3000' # 只能是字符串
- 直接在
create-react-app
脚手架若在2.0版本以上
配置多个代理:- 安装
http-proxy-middleware
:npm i http-proxy-middleware --save-dev
- 在 src 的根目录下新建文件
setupProxy.js
(文件名称固定,不能更改),写入代码:
// http-proxy-middleware V1.0版本以下使用: const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api', { target: 'http://localhost:3000/', changeOrigin: true, // pathRewrite: { // '^/api': '' // } }) ) } // http-proxy-middleware V1.0版本以上使用: const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'http://127.0.0.1:3000', secure: false, # 指定Cookies能否被用户读取 changeOrigin: true, pathRewrite: { "^/api": "/" }, }), createProxyMiddleware('/api1', { target: 'http://127.0.0.1:3001', secure: false, # 指定Cookies能否被用户读取 changeOrigin: true, pathRewrite: { "^/api1": "/" }, }) ); };
- 安装
8、配置多环境打包(官网文档):
- 安装 dotenv-cli :
npm i dotenv-cli -D
- 新建环境文件,并且写入路径:路径必须以 REACT_APP 开头
- 修改
package.json
中的scripts
来指定环境:
- 执行
npm run build:dev
即可 - 在
index.html文件
中使用:%REACT_APP_URL_API%
- 在
js/jsx文件
中使用:process.env.REACT_APP_URL_API
9、打包上线后,静态资源css和js报404:
- 需要在
package.json
文件中添加"homepage": "./"
进行重新打包即可。