博客
关于我
dotenv-cli
阅读量:137 次
发布时间:2019-02-28

本文共 1207 字,大约阅读时间需要 4 分钟。

在使用create-react-app搭建的项目中,实现不同环境(开发、测试、生产)的接口地址配置,可以通过以下步骤进行:

  • 创建baseurl.js文件:在项目根目录下新建baseurl.js,设置如下内容:

    let BASE_URL = '';if (process.env.REACT_APP_ENV === 'development') {  BASE_URL = 'http://开发环境/';} else if (process.env.REACT_APP_ENV === 'test') {  BASE_URL = 'http://测试环境/';} else if (process.env.REACT_APP_ENV === 'production') {  BASE_URL = 'http://生产环境/';}export default BASE_URL;
  • 配置.env文件:为每个环境创建相应的.env文件,并在文件中设置REACT_APP_ENV变量。例如:

    • .env.development:
      REACT_APP_ENV=development
    • .env.test:
      REACT_APP_ENV=test
    • .env.production:
      REACT_APP_ENV=production
  • 修改package.json脚本命令:在package.json中,确保每个构建命令加载正确的.env文件。例如:

    {  "scripts": {    "start": "dotenv -e .env.development react-app-rewired start",    "test": "react-app-rewired test",    "eject": "react-scripts eject",    "build:dev": "dotenv -e .env.dev react-app-rewired build",    "build:prod": "dotenv -e .env.production react-app-rewired build",    "build:test": "dotenv -e .env.test react-app-rewired build"  }}
  • 使用dotenv-cli加载环境变量:确保在终端中使用以下命令运行构建任务:

    • 开发环境:
      npm run build:dev
    • 测试环境:
      npm run build:test
    • 生产环境:
      npm run build:prod

    每次构建前,dotenv-cli会自动加载指定的.env文件,并将其内容加入到process.env中,使得BASE_URL能够根据不同环境获取正确的接口地址。

  • 通过以上配置,您可以在不同的环境下,自动切换到适当的接口地址,简化了环境切换的工作流程。

    转载地址:http://dead.baihongyu.com/

    你可能感兴趣的文章
    MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
    查看>>
    mysql一个字段为空时使用另一个字段排序
    查看>>
    MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
    查看>>
    MYSQL一直显示正在启动
    查看>>
    MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
    查看>>
    MySQL万字总结!超详细!
    查看>>
    Mysql下载以及安装(新手入门,超详细)
    查看>>
    MySQL不会性能调优?看看这份清华架构师编写的MySQL性能优化手册吧
    查看>>
    MySQL不同字符集及排序规则详解:业务场景下的最佳选
    查看>>
    Mysql不同官方版本对比
    查看>>
    MySQL与Informix数据库中的同义表创建:深入解析与比较
    查看>>
    mysql与mem_细说 MySQL 之 MEM_ROOT
    查看>>
    MySQL与Oracle的数据迁移注意事项,另附转换工具链接
    查看>>
    mysql丢失更新问题
    查看>>
    MySQL两千万数据优化&迁移
    查看>>
    MySql中 delimiter 详解
    查看>>
    MYSQL中 find_in_set() 函数用法详解
    查看>>
    MySQL中auto_increment有什么作用?(IT枫斗者)
    查看>>
    MySQL中B+Tree索引原理
    查看>>
    mysql中cast() 和convert()的用法讲解
    查看>>