编程

前端Cross-env的应用

chenmo · 12月8日 · 2021年 · 253次已读
前端Cross-env的应用

前端Cross-env的应用

前言

在实际开发项目的时候,通常会遇到需要区分 开发环境生产环境测试环境,且不同的环境请求不同的接口API。切换到不同环境的时候需要改代码,有时忘记的话, 往往就会导致对应的环境出现问题。这个时候在项目中配置 环境变量 就可以有效避免这个问题。

Cross-env

它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。

Github:官网

安装

使用

设置一个环境变量

通过cross-env设置了该环境下的环境变量:NODE_ENV值为production。因此最终,需要执行的命令是下面这段:

vue-cli2项目中,对应的脚本命令在wepack的相应文件中(示例中在 build/webpack.config.js里)

vue-cli3中,执行的脚本命令为:vue-cli-service build,因此,在vue-cli3项目中,配置如下:

访问NODE_ENV环境变量:

同时设置多个环境变量

也可以将命令分开成不同命令,或者环境变量的声明与实际执行的命令分开。如下:

childScript里是实际执行的命令,而 parentScript 则是用来设置环境变量。然后执行 parentScript 而不是childScript。这意味着可以使用$GREET env var语法,即使在通常要求为%GREET%的Windows上也是如此。

注意:

在windows上设置环境变量:

在linux设置环境变量:

设置JSON字符串

特别注意双引号之前的三重反斜杠 \\\和不使用单引号'。要在Windows和UNIX上工作,必须满足这两个条件。

完整示例

 

0 条回应

🎉 总访问量:232073 今日访问量:169 您是今天第:169 个访问者🎉