建站
咨詢
售后
建站咨詢
新聞中心
前言
今天來講一下Webpack配置環(huán)境變量，那么環(huán)境變量是干啥的。我們在開發(fā)項目中都會遇到這種場景，區(qū)分「開發(fā)環(huán)境」、「生產(chǎn)環(huán)境」、「測試環(huán)境」，不同場景請求不同的接口Api。這時候項目中配置的「環(huán)境變量」就登場啦~，下面來講一下配置環(huán)境變量的方式吧。
創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為頭屯河企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，頭屯河網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
配置方法
Set or Export
該方式有個棘手的問題就是windows和mac使用的方式還不同，不同系統(tǒng)使用啟動項目還得更改代碼，這就有點難受，我們來看一下。
「package.json」
windows系統(tǒng)如下配置
- {
- "scripts": {
- "dev": "set NODE_ENV=dev && node index.js"
- }
- }
mac系統(tǒng)如下配置
- {
- "scripts": {
- "dev": "export NODE_ENV=dev && node index.js"
- }
- }
「效果」
webpack.config.js文件
- console.log(process.env.NODE_ENV) // dev
該配置方式如果用windows方式配置，用mac電腦啟動這樣就會有問題，我們還得手動更改，這樣非常的繁瑣。
Cross-env
該插件就是解決上面我們所說的問題(不同系統(tǒng)使用不同的配置方式)，該插件稱為 "跨平臺環(huán)境變量"，就是一套代碼兼容兩端。下面我們來案例
「安裝」
- npm i cross-env -D
在項目下package.json中配置
- {
- "scripts": {
- "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",
- }
- }
「webpack.config.js」
- console.log(process.env.NODE_ENV) // baidu.com
但是上面這樣還有個問題是，雖然我們環(huán)境變量配置好了，但是只能在webpack.config.js里面使用。我們來到main.js文件下打印看看呢。
「main.js」
- console.log(process.env.NODE_ENV) // undefined
上面main.js可以清楚的看到，打印結(jié)果為undefined，這是為什么呢，是因為「當(dāng)前的環(huán)境變量」，只是在node環(huán)境中生效，在瀏覽器中并沒有，所以main.js里面獲取到的是undefined。
「有坑 - 誤區(qū)」
「webpack.config.js」
- console.log(process.env.NODE_ENV) // baidu.com
- module.exports = {
- mode: "development"
- }
「main.js」
- console.log(process.env.NODE_ENV) // development
咦，這次怎么main.js里面環(huán)境變量又變成development了，這是因為瀏覽器環(huán)境中NODE_ENV走的是webpack里的mode。
- webpack-dev-server 默認(rèn)就是 --mode=development
- webpack 默認(rèn)就是 --mode=production
注意這里的坑，避免出錯。
回歸主題，那么既然cross-env環(huán)境變量只能在node環(huán)境下使用，那怎么在瀏覽器環(huán)境下使用呢。配合Webpack提供的內(nèi)置插件全局變量，我們來配置一下。
「webpack.config.js」
- console.log(process.env.NODE_ENV) // baidu.com
- const webpack = require("webpack")
- module.exports = {
- mode: "development",
- plugins: [
- new webpack.DefinePlugin({
- "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
- })
- ]
- }
「main.js」
- console.log(process.env.NODE_ENV) // baidu.com
這時再看，cross-env全局變量已經(jīng)覆蓋掉mode的啦，上面JSON.stringify是防止解析成為一個變量?，F(xiàn)在可以在全局項目中隨意使用環(huán)境變量啦~。
本文轉(zhuǎn)載自微信公眾號「前端娛樂圈」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端娛樂圈公眾號。
標(biāo)題名稱：Webpack配置環(huán)境變量 - 避免踩坑
鏈接地址：http://www.dlmjj.cn/article/djdssgg.html
