博客
关于我
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 数据库的高可用性分析
    查看>>
    Mysql 数据库重置ID排序
    查看>>
    Mysql 数据类型一日期
    查看>>
    MySQL 数据类型和属性
    查看>>
    mysql 敲错命令 想取消怎么办?
    查看>>
    Mysql 整形列的字节与存储范围
    查看>>
    mysql 断电数据损坏,无法启动
    查看>>
    MySQL 日期时间类型的选择
    查看>>
    Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
    查看>>
    MySQL 是如何加锁的?
    查看>>
    MySQL 是怎样运行的 - InnoDB数据页结构
    查看>>
    mysql 更新子表_mysql 在update中实现子查询的方式
    查看>>
    MySQL 有什么优点?
    查看>>
    mysql 权限整理记录
    查看>>
    mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
    查看>>
    MYSQL 查看最大连接数和修改最大连接数
    查看>>
    MySQL 查看有哪些表
    查看>>
    mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
    查看>>
    MySql 查询以逗号分隔的字符串的方法(正则)
    查看>>
    MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
    查看>>