react+antd+nginx网站前端搭建（从零开始的开发者记录：一）

最新推荐文章于 2024-03-19 11:57:44 发布

朝日奈

最新推荐文章于 2024-03-19 11:57:44 发布

阅读量2k

点赞数 1

文章标签： React antd nginx Gzip

本文链接：https://blog.csdn.net/mps_33/article/details/84492769

版权

本文记录了一位开发者从零开始创建React项目，使用Antd进行UI组件开发，并通过Nginx进行web应用部署的全过程。内容包括React项目的基本工具安装与创建，Antd的安装及按需加载优化，以及如何打包项目并配置Nginx进行服务端部署，最后介绍了Nginx的相关目录和配置文件设置。

摘要由CSDN通过智能技术生成

react项目创建

基本工具安装

sudo apt-get install -y npm
sudo npm install -g yarn create-react-app

创建react项目

create-react-app react-demo
cd react-demo
npm run start

自动启动浏览器后可以看到
npm的默认端口为3000，若已被占用，则向后寻找空闲端口，输入y或n选择是否使用新端口即可

使用Antd

安装antd

yarn add antd

antd优化

引入各个antd组件按需加载功能

yarn add react-app-rewired
yarn add babel-plugin-import

修改package.json中scripts部分

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

在项目目录下创建config-overrides.js文件

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
	// do stuff with the webpack config...
	config = injectBa