博客
关于我
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/

    你可能感兴趣的文章
    NodeJS @kubernetes/client-node连接到kubernetes集群的方法
    查看>>
    NodeJS API简介
    查看>>
    Nodejs express 获取url参数,post参数的三种方式
    查看>>
    nodejs http小爬虫
    查看>>
    nodejs libararies
    查看>>
    vue3+element-plus 项目中 el-switch 刷新后自动触发change?坑就藏在这里!
    查看>>
    nodejs npm常用命令
    查看>>
    nodejs npm常用命令
    查看>>
    Nodejs process.nextTick() 使用详解
    查看>>
    NodeJS yarn 或 npm如何切换淘宝或国外镜像源
    查看>>
    nodejs 中间件理解
    查看>>
    nodejs 创建HTTP服务器详解
    查看>>
    nodejs 发起 GET 请求示例和 POST 请求示例
    查看>>
    NodeJS 导入导出模块的方法( 代码演示 )
    查看>>
    nodejs 开发websocket 笔记
    查看>>
    nodejs 的 Buffer 详解
    查看>>
    nodejs 的 path 模块详解
    查看>>
    NodeJS 的环境变量: 开发环境vs生产环境
    查看>>
    nodejs 读取xlsx文件内容
    查看>>
    nodejs 运行CMD命令
    查看>>