process.env环境变量配置方式(配置环境变量区分开发环境和生产环境)
一、process.env 为何物?
言归正传。 process.env 是 Node.js 中的一个环境变量。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看:
- 1.安装nodejs
- 2.通过终端(cmd),输入node,进入编辑模式
- 3.输入process+回车, 显示进程
- 4.输入process.env+回车,显示 当前环境(environment)
- 5.输入process.env.NODE_ENV+回车,显示'undefined'
说明 process.env.NODE_ENV 不是系统默认选项,是人为后续加入的一个自定义项
这个变量主要用于标识当前的环境(生产环境,开发环境)。默认是没有这个环境变量的,需要自己手动配置。不同系统有不同的环境变量配置方式。
开始设置:
二、设置方式一:
1、npm init -y 先初始化一个默认的包配置
2、在生成的package.json中,对scripts添加新指令
windows和posix命令如何使用环境变量存在差异
...
scripts:{"dev" : "set NODE_ENV=production webpack"
}
...
...
scripts:{"dev" : "NODE_ENV=production webpack"
}
...
所以需要借助于第三方包,来解决这个问题
3、cross-env (解决不同系统之前的命令兼容问题)
说明:官方文档cross-env - npm
cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform.
Just set it like you would if it's running on a POSIX system,
and cross-env will take care of setting it properly.
cross env使您可以使用单个命令,而不必担心为平台正确设置或使用环境变量。只要像在POSIX系统上运行时那样设置它,cross env就会负责正确设置它。
安装:
npm install cross-env -D
使用:
...
{"scripts": {"build": "cross-env NODE_ENV=production webpack"}
}
...
4、完成设置与验证
安装完 cross-env 在package.json中,定义2个指令,一个开发,一个生产,将NODE_ENV完成设置
"scripts": {"dev": "cross-env NODE_ENV=development webpack --progress --colors","build": "cross-env NODE_ENV=production webpack"
}
在webpack.config.js(没有就新建一个官当文档配置)中,设置log验证一下
let env = process.env.NODE_ENV;
console.log(env);
终端输入npm run dev,log输出信息 "development"
终端输入npm run build,log输出信息 "production"
验证完毕,process.env.NODE_ENV设置好了
5、将process.env.NODE_ENV全局化
如果在业务代码中,需要根据开发环境,动态改变数据请求地址,会更加自动化,所以不仅仅在打包配置中我们需要使用 process.env.NODE_ENV,在其他模块中,仍要使用它,则需要将其全局化。
在webpack.config.js中
...
const webpack = require('webpack');
...
module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({"process.argv": JSON.stringify(process.argv)})]}
}
...
6、总结
安装 cross-env 指令系统兼容包
npm install cross-env -D
在package.json中配置指令
...
"scripts": {"dev": "cross-env NODE_ENV=development webpack --progress --colors","build": "cross-env NODE_ENV=production webpack"
}
...
在webpack.config.js中,全局化process.env.NODE_ENV
...
const webpack = require('webpack');
...
module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({"process.argv": JSON.stringify(process.argv)})]}
}
...
根据开发环境,DIY自己业务逻辑
在webpack.config.js中,根据process.env.NODE_ENV自行配置引用依赖逻辑,在子模块中根据process.env.NODE_ENV调整数据请求连接,使得项目更加自动化。
三、设置方式二: 通过模式方式(以vue为例)
NODE_ENV 变量只能在系统中配置吗?其实不然。在 Vue 项目中, Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文档说明了这个问题。
模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:
development
模式用于vue-cli-service serve
test
模式用于vue-cli-service test:unit
production
模式用于vue-cli-service build
和vue-cli-service test:e2e
你可以通过传递
--mode
选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:vue-cli-service build --mode development
也就是说,在 Vue 中, NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后,运行 Vue CLI 指令( npm run dev(serve) ,npm run build )时,就会将该模式下的NODE_ENV载入其中了。而这些命令,都有自己的默认模式:
- npm run dev(serve) ,其实是运行了 vue-cli service serve ,默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
- npm run build ,其实运行了 vue-cli service build ,默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。
修改方式如下,以键值对的方式:
.env.staging
NODE_ENV = production
除了以上的修改方式外,也可以在命令后直接使用 --mode 参数手动指定模式。当然,每个模式配置的变量也不只有 NODE_ENV , 也可以通过配置其他的变量简化工作流程。
模式的应用
有了模式的概念,就可以根据不同的环境配置模式,就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境, publicPath参数 (部署应用包时的基本 URL) 可能不同。遇到这种情况就可以在 vue.config.js 文件中,将 publicPath 参数设置为:
publicPath: process.env.BASE_URL
设置之后,再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了,这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。
Tips: 即使不是生产环境,也可以将模式设置为 production ,这样可以获得 webpack 默认的打包优化。
示例:
1、在根目录新增五个文件(根据自身情况增减)
.env 和 .env.dev和 .env.pre和 .env.prod和 .env.sit和 .env.uat,分别为默认配置、本地开发配置、灰度配置、生产配置、测试配置1、测试配置2,(ps: vue_APP是统一标志,后面的拓展名可以任取)
.env
VUE_APP_TITLE='dev'
.env.dev
NODE_ENV = 'development'
VUE_APP_TITLE = 'development'/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"/*首页地址*/
VUE_APP_URL="http://xxx"/*proxy代理地址*/
VUE_APP_PROXYURL='http://xxx'
.env.prod
NODE_ENV = production
VUE_APP_TITLE = 'prod'/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"/*首页地址*/
VUE_APP_URL="http://xxx"
2、设置项目启动时默认的环境
只需要在项目启动命令后面修改需要的环境就行,例如我这是npm run dev,把--mode dev改成--mode uat就行了
package.json
"scripts": { "dev": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode dev", "lint": "vue-cli-service lint", "build-sit": "vue-cli-service build --mode sit", "build-uat": "vue-cli-service build --mode uat", "build-pre": "vue-cli-service build --mode pre", "build-prod": "vue-cli-service build --mode prod"
}
3、查看环境是否配置成功
在main.js里打印当前环境,输出就成功了
console.log(process.env.NODE_NEV);
console.log(process.env.VUE_APP_URL);
process.env环境变量配置方式(配置环境变量区分开发环境和生产环境)相关推荐
- SpringBoot的properties和yml两种配置方式, 配置注入参数, 以及配置文件读取失效的问题
SpringBoot支持两种配置方式,一种是properties文件,一种是yml 首先在pom文件中添加依赖: <dependency><groupId>org.spring ...
- 前端开发-日常开发沉淀之生产环境与开发环境
获取浏览器: window.location.protocol 获取请求地址:window.location.host, 项目开发实际用途:var hostServer = window.locati ...
- 变量置换方式linux,Shell变量测试与内容置换
在脚本中,有时需要判断变量是否存在或是否被赋予了值,如果变量已经存在并且被赋予了值,则不改变变量:如果变量不存在或没有被赋值,则赋予其新值.这时我们就可以使用变量测试与内容置换. 我们在脚本中可以使用 ...
- python变量赋值方式_python中变量的命令规制及变量的赋值方式
文章结构: 一.python中变量的命名规则 二.变量赋值的三种方式 三.python的垃圾回收机制 一.Python中变量的命令规则 变量名只能包含字母.数字和下划线,且不能以数字开头: 变量名不能 ...
- react http请求_通过Webpack全局配置开发环境和多种生产环境的请求地址
在线上项目的开发中,我们经常会有一个测试服务器一个正式服务器,当我们开发时我们会去使用测试服务器的接口地址,而发版时会把地址改为正式服务器的地址,因此我们可能会在两个地址来回切换(有可能还有更多环境, ...
- vue环境变量配置——process.env(详细)
在用vue框架时,经常用到两种环境,一种是开发环境,就是本地开发时的环境,一种是生产环境,就是要发布到线上的环境. 平时开发是用生产环境的,如果发布到线上时,需要切换环境为线上.如果人为去切换也是可以 ...
- 环境变量process.env.NODE_ENV详解
process.env.NODE_ENV详解 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 一. p ...
- 终于搞懂Vue开发环境和生产环境的代理配置了
在vue项目中有两个关键的环境配置文件: .env.development .env.production 一个表示开发环境,一个表示生产环境,建议在项目搭建初期就创建好这两个文件,首先拿开发环境来举 ...
- webpack开发环境和生产环境的配置区别
1.定义: 开发环境:开发人员调试开发的一种环境: 方便调试,保持高效的开发 生产环境:发布上线的环境: 让程序在生产环境中正常有效的运行 开发环境的需求: 模块热更新 (本地开启服务,实时更新) s ...
最新文章
- 程序员兄弟们,我们的基本素质怎么样?
- Spring MVC整合Velocity
- 【Android 应用开发】 Application 使用分析
- Docker的启动与停止命令
- Linux下C程序插入执行shell脚本
- Eval.cs的改进版 动态编译类,可以计算表达式,也可以调用系统中的类
- 原来自己一直平凡着 2015-10-20
- 荷兰人发明的新客机是劈叉的!乘客坐在机翼上
- Enter passphrase for key '/home/mha/.ssh/id_rsa解决方法
- “21天好习惯”第一期-20
- 从小米智能家居入手,揭秘物联网关键技术
- Mapper的xml文件基础语法笔记,增删改查,遍历
- java验证身份证合法性_Java安全性,第2部分:身份验证和授权
- 【论文阅读】The Generals’ Scuttlebutt: Byzantine-Resilient Gossip Protocols
- 晶品特装科创板上市:市值68亿 主打地面无人装备研发与产销
- Java通过mongo-java-driver-3.0+查询mongodb数据库
- Python爬虫实战:分析《战狼2》豆瓣影评
- Android简单计时器
- 【LOESS局部加权非参数回归】
- Sklearn-GBDT(GradientBoostingDecisionTree)梯度提升树
热门文章
- 《算法导论》学习分享——11. 散列表(哈希表)
- 滴滴2017校园招聘笔试题
- 系统服务器一般都要求冗余配置,服务器冗余配置
- Java-Collections中的unmodifiablexxx方法
- lightbgm参数_XGBoost和LightGBM的参数以及调参
- 无序列表和有序列表可以相互嵌套吗?
- tar解压包的时候出现错误 gzip: stdin: not in gzip format以及tar命令详解
- mysql 8.0.20修改不区分大小写
- 终于造句,小学生怎么用终于造句?
- 嵌入式实时操作系统uc/OS-II第4章课后习题4-6