(动手)dva配置env实现环境切换

Cheng_Gang 发布于2019-08-23 11:50 / 3742人阅读

摘要：干货我们的逻辑是，在执行任务时候，携带参数，在配置中覆盖的默认配置，然后在执行中拿到变量，从而判断环境走不同的逻辑。更优雅的做法，就是在中通过，加载不同的环境配置文件名，从而达到切换环境的目的。

前言

在上个文章中，我们讲了如何操起dva就用,但是不够优雅，接下来，我就以自己的开发经历，把坑都提出来，然后填上。
今天就讲讲怎么切换环境吧，dev和prod，甚至uat，poc，test。
话不多说，请往下看。

干货

我们的逻辑是，在package.json 执行任务时候，携带参数，在webpack配置中覆盖roadhorgrc的默认配置，然后在执行js中拿到env变量，从而判断环境走不同的逻辑。
上面的话不用想得太明白，看接下来的操作吧

配置env 配置package.json

我们使用cross-env 用来跨平台执行设置env命令，比如在mac上和windows上的命令是不同的。
(注意:要提前安装哟)
npm i -D corss-env

做完以上，我们在进入webpack的配置时，就可以拿到API_ENV

配置webpack

首先在根目录下新建一个 ".webpackrc.js"的文件
内容如图

console.log("======", process.env);

export default {
  entry: "src/index.js",
  define: {
    "process.env": {
      NODE_ENV: process.env.NODE_ENV,
      API_ENV: process.env.API_ENV
    }
  },
  extraBabelPlugins: [["import", { libraryName: "antd", libraryDirectory: "es", style: true }]],
  env: {
    development: {
      extraBabelPlugins: ["dva-hmr"],
    },
  }
};

其他的就不多阐述了，直接说define，我们通过define定义一个json用来作为env变量，而这里的赋值就是拿到了package.json中配置的，可以在控制台查看，因为我们console了。

使用env

上面2步操作完后，基本上就可以使用了，使用方法为，process.env.API_ENV,我用来判断API服务的环境。
当然，你们也可以在package.json 设置成 XXX_ENV，不过记得，webpack里面也要对应更改。
更优雅的做法，就是在webpack中通过env，加载不同的环境配置文件名，从而达到切换环境的目的。

小结

看了好一会的issue，才整清楚，这些东西还是要有人写出来，才够清晰。

GPU云服务器云服务器阿里云服务器环境切换需要配置吗实现语言切换 ubuntu切换桌面环境 linux切换桌面环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97552.html

roadhog+dva中环境变量的配置

摘要：有时候我们在代码里需要根据环境变量来决定一些逻辑。常见的比如，在测试环境访问的后端跟正式环境是不一样的。是个服务于框架的命令行工具，主要就是提供和等命令，屏蔽了的复杂配置，提供了自己的相对简单的配置能力。显然，这里的变量配置应当由来处理。有时候我们在代码里需要根据环境变量来决定一些逻辑。常见的比如，在测试环境访问的后端url跟正式环境是不一样的。不依赖框架的话，应当是基于webpa...

Songlcy 2019-08-23 15:14 评论0 收藏0
【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Mode

摘要：我们就采用这种方式来进行权限验证。这里我还是使用在中的下新增单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计基于 JWT 的权限验证这里有一篇文章描述的已经非常详尽，阐述了 JWT 验证相比较传统的持久化 session 验证的优势，以及基于 angular 和 express 验证的简单流程。基于Json ...

luodongseu 2019-08-21 11:44 评论0 收藏0
React+dva+webpack+antd-mobile 实战分享（一）

摘要：再看本篇文章之前，本人还是建议想入坑的童鞋可以选有来创建的项目，因为现在和还不成熟，坑相对要多一些，当然如果你已经做好跳坑的准备，那么请继续往下走本文适合对有一定了解的人。再看本篇文章之前，本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目，因为现在dva和roadhog还不成熟，坑相对要多一些，当然如果你已经做好跳坑的准备，那么请继续往...

ziwenxie 2019-08-20 17:39 评论0 收藏0
UMI.js使用方法

摘要：或者在中导入样式文件存放全局通用请求存放通用方法这是时生产的临时目录，默认包含和，有些插件也会在这里生成一些其他临时文件。项目中常用于发送请求，等待服务端响应数据。如果使用的装饰器则为 umi.js使用方法 node环境安装在官网下载与系统相应的node版本，node.js版本>=8.10 编辑器推荐使用Visual Studio Code 安装方法安装umi npm insta...

hearaway 2019-08-23 16:56 评论0 收藏0