使用 create-react-app 脚手架搭建React项目

❀官网

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、重写脚手架的配置（参考链接）：

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、配置多环境打包（官网文档）：

9、打包上线后，静态资源css和js报404：

• 需要在package.json文件中添加"homepage": "./"进行重新打包即可。