博客
关于我
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 5.6 修改端口_mysql5.6.24怎么修改端口号
    查看>>
    MySQL 8.0 恢复孤立文件每表ibd文件
    查看>>
    MySQL 8.0开始Group by不再排序
    查看>>
    mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
    查看>>
    multi swiper bug solution
    查看>>
    MySQL Binlog 日志监听与 Spring 集成实战
    查看>>
    MySQL binlog三种模式
    查看>>
    multi-angle cosine and sines
    查看>>
    Mysql Can't connect to MySQL server
    查看>>
    mysql case when 乱码_Mysql CASE WHEN 用法
    查看>>
    Multicast1
    查看>>
    MySQL Cluster 7.0.36 发布
    查看>>
    Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
    查看>>
    MySQL Cluster与MGR集群实战
    查看>>
    multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
    查看>>
    mysql cmake 报错,MySQL云服务器应用及cmake报错解决办法
    查看>>
    Multiple websites on single instance of IIS
    查看>>
    mysql CONCAT()函数拼接有NULL
    查看>>
    multiprocessing.Manager 嵌套共享对象不适用于队列
    查看>>
    multiprocessing.pool.map 和带有两个参数的函数
    查看>>