react项目新建路由配置到分环境打包上服务器（本地/测试/生产）

注：环境该有的配齐

1、查看react最新版本
npm info react
如果不是最新的版本，安装react最新版
@后面输入版本号如下
npm install --save react@17.0.1

create-react-app 安装：
 安装语句：cnpm install -g create-react-app
 验证命令：create-react-app --version

2、查看create-react-app最新版本
npm info create-react-app
查看当前使用版本
create-react-app -V
如果是低版本就不能够使用create-react-app新建react项目
如果你的版本是小于查询到的最新版本的话。那么需要先卸载掉原先的旧版本：
npm uninstall -g create-react-app
1）运行create-react-app -V查看版本号，发现还可以拿到版本号，说明未被完全删除。
2）运行where create-react-app命令，若是有返回内容，则将返回内容全部手动删除。或者在卸载过程中如果遇到一个错误，这个错误返回并提示create-react-app，create-react-app.cmd这两个文件的路径时，那么就要在电脑上找到对应的文件并删除。

3、react，create-react-app 版本最新之后，就可以正常的使用create-react-app 新建项目了（如果以前没有装过按照最新的装就可以了）
1）create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）
2）cd reactproject 通过命令进入文件夹内部，准备运行项目
3）npm start 运行项目
注：如果新建不成功提示没有权限的什么的，用管理员权限走，cd cd cd 进来搞

4、项目跑起来后，分环境打包放服务器，运行代码时，走不同的接口。
直接到package.json页面中 script 内容修改如下：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "set REACT_APP_PROXY_URL=dev&& react-scripts build", 
    "build:pro": "set REACT_APP_PROXY_URL=pro&& react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 },

然后在打包的时候使用 yarn build:dev 或者 yarn build:pro 打出想要的

APP.js页面添加环境区分（临时的，项目可以按需规划）

const REACT_APP_PROXY_URL = process.env.REACT_APP_PROXY_URL;
if(REACT_APP_PROXY_URL == "pro"){//生产环境
    console.log("生产环境的请求地址")
}else if(REACT_APP_PROXY_URL == "dev"){//测试环境
    console.log("测试环境")
}else{//本地跑的服务
    console.log("本地运行")
}

yarn start 打印 "本地运行"
yarn build:dev 打包出来放服务器之后，打印 "测试环境"
yarn build:pro 打包出来放服务器之后，打印 "生产环境的请求地址"

放服务器就是将打包好的build文件夹中的内容进行提交。同时 package.json页面中添加 "homepage":".", 这样访问该react项目的地址就为 http://xxxx.com.cn/项目名称/index
如图：

755fc02397cdbf65e1a767263f4877a.png

5、路由配置

安装

npm i react-router-dom -S

使用大概这个样子 asyncComponent 页面异步加载使用。

09ef1e4a7ac280369789dff3bd97940.png

注意

<Route exact path="/shopcsr/login" component={Login}/>

注：上服务器一般都是有该项目名字加页面路径的比如：访问首页 http:.....cn/name/index 访问登陆页面 http:.....cn/name/login。这里面的 shopcsr 等于 name，访问login的域名就为：http://xxx.xx.cn/shopcsr/login，页面路由如果没有加上name，那么服务器只能访问到index页面的内容，换路由中的页面名字没用。

最后编辑于：2021.04.10 15:15:55