国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

(動(dòng)手)dva配置env實(shí)現(xiàn)環(huán)境切換

Cheng_Gang / 3783人閱讀

摘要：干貨我們的邏輯是，在執(zhí)行任務(wù)時(shí)候，攜帶參數(shù)，在配置中覆蓋的默認(rèn)配置，然后在執(zhí)行中拿到變量，從而判斷環(huán)境走不同的邏輯。更優(yōu)雅的做法，就是在中通過，加載不同的環(huán)境配置文件名，從而達(dá)到切換環(huán)境的目的。

前言

在上個(gè)文章中，我們講了如何操起dva就用,但是不夠優(yōu)雅，接下來，我就以自己的開發(fā)經(jīng)歷，把坑都提出來，然后填上。
今天就講講怎么切換環(huán)境吧，dev和prod，甚至uat，poc，test。
話不多說，請(qǐng)往下看。

干貨

我們的邏輯是，在package.json 執(zhí)行任務(wù)時(shí)候，攜帶參數(shù)，在webpack配置中覆蓋roadhorgrc的默認(rèn)配置，然后在執(zhí)行js中拿到env變量，從而判斷環(huán)境走不同的邏輯。
上面的話不用想得太明白，看接下來的操作吧

配置env 配置package.json

我們使用cross-env 用來 跨平臺(tái)執(zhí)行設(shè)置env命令，比如在mac上和windows上的命令是不同的。
(注意:要提前安裝喲)
npm i -D corss-env

做完以上，我們?cè)谶M(jìn)入webpack的配置時(shí)，就可以拿到API_ENV

配置webpack

首先在根目錄下新建一個(gè) ".webpackrc.js"的文件
內(nèi)容如圖

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定義一個(gè)json用來作為env變量，而這里的賦值就是拿到了package.json中配置的，可以在控制臺(tái)查看，因?yàn)槲覀僣onsole了。

使用env

上面2步操作完后，基本上就可以使用了，使用方法為，process.env.API_ENV,我用來判斷API服務(wù)的環(huán)境。
當(dāng)然，你們也可以在package.json 設(shè)置成 XXX_ENV，不過記得，webpack里面也要對(duì)應(yīng)更改。
更優(yōu)雅的做法，就是在webpack中 通過env，加載不同的環(huán)境配置文件名，從而達(dá)到切換環(huán)境的目的。

小結(jié)

看了好一會(huì)的issue，才整清楚，這些東西還是要有人寫出來，才夠清晰。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97552.html

相關(guān)文章

  • roadhog+dva中環(huán)境變量的配置

    摘要：有時(shí)候我們?cè)诖a里需要根據(jù)環(huán)境變量來決定一些邏輯。常見的比如，在測(cè)試環(huán)境訪問的后端跟正式環(huán)境是不一樣的。是個(gè)服務(wù)于框架的命令行工具，主要就是提供和等命令，屏蔽了的復(fù)雜配置，提供了自己的相對(duì)簡(jiǎn)單的配置能力。顯然，這里的變量配置應(yīng)當(dāng)由來處理。 有時(shí)候我們?cè)诖a里需要根據(jù)環(huán)境變量來決定一些邏輯。常見的比如，在測(cè)試環(huán)境訪問的后端url跟正式環(huán)境是不一樣的。 不依賴框架的話，應(yīng)當(dāng)是基于webpa...

    Songlcy 評(píng)論0 收藏0

  • 【單頁(yè)面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗(yàn)證與 DVA 的 Mode

    摘要：我們就采用這種方式來進(jìn)行權(quán)限驗(yàn)證。這里我還是使用在中的下新增單頁(yè)面博客從前端到后端環(huán)境搭建單頁(yè)面博客從前端到后端基于搭建博客前后臺(tái)界面單頁(yè)面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì) 基于 JWT 的權(quán)限驗(yàn)證 這里有一篇文章描述的已經(jīng)非常詳盡，闡述了 JWT 驗(yàn)證相比較傳統(tǒng)的持久化 session 驗(yàn)證的優(yōu)勢(shì)，以及基于 angular 和 express 驗(yàn)證的簡(jiǎn)單流程。 基于Json ...

    luodongseu 評(píng)論0 收藏0

  • React+dva+webpack+antd-mobile 實(shí)戰(zhàn)分享（一）

    摘要：再看本篇文章之前，本人還是建議想入坑的童鞋可以選有來創(chuàng)建的項(xiàng)目，因?yàn)楝F(xiàn)在和還不成熟，坑相對(duì)要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請(qǐng)繼續(xù)往下走本文適合對(duì)有一定了解的人。 再看本篇文章之前，本人還是建議想入坑react的童鞋可以選有create-react-app來創(chuàng)建react的項(xiàng)目，因?yàn)楝F(xiàn)在dva和roadhog還不成熟，坑相對(duì)要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請(qǐng)繼續(xù)往...

    ziwenxie 評(píng)論0 收藏0

  • UMI.js使用方法

    摘要：或者在中導(dǎo)入樣式文件存放全局通用請(qǐng)求存放通用方法這是時(shí)生產(chǎn)的臨時(shí)目錄，默認(rèn)包含和，有些插件也會(huì)在這里生成一些其他臨時(shí)文件。項(xiàng)目中常用于發(fā)送請(qǐng)求，等待服務(wù)端響應(yīng)數(shù)據(jù)。如果使用的裝飾器則為 umi.js使用方法 node環(huán)境安裝 在官網(wǎng)下載與系統(tǒng)相應(yīng)的node版本，node.js版本>=8.10 編輯器 推薦使用Visual Studio Code 安裝方法 安裝umi npm insta...

    hearaway 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<