美文网首页
react项目新建路由配置到分环境打包上服务器(本地/测试/生产

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

作者: 不知荼 | 来源:发表于2021-04-01 17:11 被阅读0次

    注:环境该有的配齐

    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页面的内容,换路由中的页面名字没用。

    相关文章

      网友评论

          本文标题:react项目新建路由配置到分环境打包上服务器(本地/测试/生产

          本文链接:https://www.haomeiwen.com/subject/myitkltx.html