資訊專欄INFORMATION COLUMN
摘要：干貨我們的邏輯是，在執(zhí)行任務(wù)時候，攜帶參數(shù)，在配置中覆蓋的默認(rèn)配置，然后在執(zhí)行中拿到變量，從而判斷環(huán)境走不同的邏輯。更優(yōu)雅的做法，就是在中通過，加載不同的環(huán)境配置文件名，從而達(dá)到切換環(huán)境的目的。
前言
在上個文章中，我們講了如何操起dva就用,但是不夠優(yōu)雅，接下來，我就以自己的開發(fā)經(jīng)歷，把坑都提出來，然后填上。
今天就講講怎么切換環(huán)境吧，dev和prod，甚至uat，poc，test。
話不多說，請往下看。
我們的邏輯是，在package.json 執(zhí)行任務(wù)時候，攜帶參數(shù)，在webpack配置中覆蓋roadhorgrc的默認(rèn)配置，然后在執(zhí)行js中拿到env變量，從而判斷環(huán)境走不同的邏輯。
上面的話不用想得太明白，看接下來的操作吧
我們使用cross-env 用來 跨平臺執(zhí)行設(shè)置env命令，比如在mac上和windows上的命令是不同的。
(注意:要提前安裝喲)
npm i -D corss-env
做完以上，我們在進(jìn)入webpack的配置時，就可以拿到API_ENV
配置webpack首先在根目錄下新建一個 ".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定義一個json用來作為env變量，而這里的賦值就是拿到了package.json中配置的，可以在控制臺查看，因為我們console了。
使用env上面2步操作完后，基本上就可以使用了，使用方法為，process.env.API_ENV,我用來判斷API服務(wù)的環(huán)境。
當(dāng)然，你們也可以在package.json 設(shè)置成 XXX_ENV，不過記得，webpack里面也要對應(yīng)更改。
更優(yōu)雅的做法，就是在webpack中 通過env，加載不同的環(huán)境配置文件名，從而達(dá)到切換環(huán)境的目的。
看了好一會的issue，才整清楚，這些東西還是要有人寫出來，才夠清晰。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97552.html
摘要：有時候我們在代碼里需要根據(jù)環(huán)境變量來決定一些邏輯。常見的比如，在測試環(huán)境訪問的后端跟正式環(huán)境是不一樣的。是個服務(wù)于框架的命令行工具，主要就是提供和等命令，屏蔽了的復(fù)雜配置，提供了自己的相對簡單的配置能力。顯然，這里的變量配置應(yīng)當(dāng)由來處理。 有時候我們在代碼里需要根據(jù)環(huán)境變量來決定一些邏輯。常見的比如，在測試環(huán)境訪問的后端url跟正式環(huán)境是不一樣的。 不依賴框架的話，應(yīng)當(dāng)是基于webpa...
摘要：我們就采用這種方式來進(jìn)行權(quán)限驗證。這里我還是使用在中的下新增單頁面博客從前端到后端環(huán)境搭建單頁面博客從前端到后端基于搭建博客前后臺界面單頁面博客從前端到后端基于和的權(quán)限驗證與的設(shè)計 基于 JWT 的權(quán)限驗證 這里有一篇文章描述的已經(jīng)非常詳盡，闡述了 JWT 驗證相比較傳統(tǒng)的持久化 session 驗證的優(yōu)勢，以及基于 angular 和 express 驗證的簡單流程。 基于Json ...
摘要：再看本篇文章之前，本人還是建議想入坑的童鞋可以選有來創(chuàng)建的項目，因為現(xiàn)在和還不成熟，坑相對要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請繼續(xù)往下走本文適合對有一定了解的人。 再看本篇文章之前，本人還是建議想入坑react的童鞋可以選有create-react-app來創(chuàng)建react的項目，因為現(xiàn)在dva和roadhog還不成熟，坑相對要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請繼續(xù)往...
摘要：或者在中導(dǎo)入樣式文件存放全局通用請求存放通用方法這是時生產(chǎn)的臨時目錄，默認(rèn)包含和，有些插件也會在這里生成一些其他臨時文件。項目中常用于發(fā)送請求，等待服務(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...
閱讀 948·2021-11-22 12:09
閱讀 3715·2021-09-27 13:36
閱讀 1403·2021-08-20 09:37
閱讀 4027·2019-12-27 12:22
閱讀 2365·2019-08-30 15:55
閱讀 2370·2019-08-30 13:16
閱讀 2832·2019-08-26 17:06
閱讀 3442·2019-08-23 18:32
