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