Webpack配置环境变量 - 避免踩坑
今天来讲一下Webpack配置环境变量,那么环境变量是干啥的。我们在开发项目中都会遇到这种场景,区分「开发环境」、「生产环境」、「测试环境」,不同场景请求不同的接口Api。这时候项目中配置的「环境变量」就登场啦~,下面来讲一下配置环境变量的方式吧。
该方式有个棘手的问题就是windows和mac使用的方式还不同,不同系统使用启动项目还得更改代码,这就有点难受,我们来看一下。
该配置方式如果用windows方式配置,用mac电脑启动这样就会有问题,我们还得手动更改,这样非常的繁琐。
该插件就是解决上面我们所说的问题(不同系统使用不同的配置方式),该插件称为 跨平台环境变量,就是一套代码兼容两端。下面我们来案例
但是上面这样还有个问题是,虽然我们环境变量配置好了,但是只能在webpack.config.js里面使用。我们来到main.js文件下打印看看呢。
上面main.js可以清楚地看到,打印结果为undefined,这是为什么呢,是因为「当前的环境变量」,只是在node环境中生效,在浏览器中并没有,所以main.js里面获取到的是undefined。
回归主题,那么既然cross-env环境变量只能在node环境下使用,那怎么在浏览器环境下使用呢。配合Webpack提供的内置插件全局变量,我们来配置一下。
这时再看,cross-env全局变量已经覆盖掉mode的啦,上面JSON.stringify是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。
- 标签:本站
- 编辑:唐志钢
- 相关文章
-
Webpack配置环境变量 - 避免踩坑
今天来讲一下Webpack配置环境变量,那么环境变量是干啥的
-
在上海平均月薪2w的前端开发工程师是做什么的
“小李啊,毕业了吧,现在哪里上班,做什么的啊?”“噢哟,学计算机的啊,开发软件,工资很高的…
- web前端开发工程师前景与职责
- Web前端面试攻略
- 前端开发之多环境下react的配置
- web前端15个必知的超有用的nodejs库
- 27岁转行互联网软件测试VS前端编程到底哪个是更好的选择?