Webpack配置环境变量 - 避免踩坑

前言

今天来讲一下Webpack配置环境变量，那么环境变量是干啥的。我们在开发项目中都会遇到这种场景，区分「开发环境」、「生产环境」、「测试环境」，不同场景请求不同的接口Api。这时候项目中配置的「环境变量」就登场啦~，下面来讲一下配置环境变量的方式吧。

创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为头屯河企业提供专业的成都网站建设、网站建设，头屯河网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

配置方法

Set or Export

该方式有个棘手的问题就是windows和mac使用的方式还不同，不同系统使用启动项目还得更改代码，这就有点难受，我们来看一下。

「package.json」

windows系统如下配置

 
 
 
 
  
  
  
  
{ 
  
  
  
  
  "scripts": { 
  
  
  
  
    "dev": "set NODE_ENV=dev && node index.js" 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

mac系统如下配置

 
 
 
 
  
  
  
  
{ 
  
  
  
  
  "scripts": { 
  
  
  
  
    "dev": "export NODE_ENV=dev && node index.js" 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

「效果」

webpack.config.js文件

 
 
 
 
  
  
  
  
console.log(process.env.NODE_ENV) // dev 
 
 
 

该配置方式如果用windows方式配置，用mac电脑启动这样就会有问题，我们还得手动更改，这样非常的繁琐。

Cross-env

该插件就是解决上面我们所说的问题(不同系统使用不同的配置方式)，该插件称为 "跨平台环境变量"，就是一套代码兼容两端。下面我们来案例

「安装」

 
 
 
 
  
  
  
  
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 
 
 
 

但是上面这样还有个问题是，虽然我们环境变量配置好了，但是只能在webpack.config.js里面使用。我们来到main.js文件下打印看看呢。

「main.js」

 
 
 
 
  
  
  
  
console.log(process.env.NODE_ENV) // undefined 
 
 
 

上面main.js可以清楚的看到，打印结果为undefined，这是为什么呢，是因为「当前的环境变量」，只是在node环境中生效，在浏览器中并没有，所以main.js里面获取到的是undefined。

「有坑 - 误区」

「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里面环境变量又变成development了，这是因为浏览器环境中NODE_ENV走的是webpack里的mode。

• webpack-dev-server 默认就是 --mode=development
• webpack 默认就是 --mode=production

注意这里的坑，避免出错。

回归主题，那么既然cross-env环境变量只能在node环境下使用，那怎么在浏览器环境下使用呢。配合Webpack提供的内置插件全局变量，我们来配置一下。

「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全局变量已经覆盖掉mode的啦，上面JSON.stringify是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。

本文转载自微信公众号「前端娱乐圈」，可以通过以下二维码关注。转载本文请联系前端娱乐圈公众号。

分享标题：Webpack配置环境变量 - 避免踩坑
当前网址：http://www.csdahua.cn/qtweb/news8/33258.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网