我们一般用process.env.NODE_ENV来区分开发环境和线上环境。
在开始本文之前,我先强调一下, process.env.NODE_ENV默认只有两种状态即development和production,development指开发环境,说白了就是本地开发即localhost环境(本地的开发),而production代表发布在任何服务上的服务(不管是dat、uat还是生产环境),node是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境,production代表线上环境(包括dat、uat和生产环境等)
其实这一部分在Vue CLI官方文档上是有介绍的。实践出真知,我还是想从我的实践上去总结一下。
平时我们通过vue create test创建一个项目后,会在package.json中的script脚本命令看到这些:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
npm run serve 运行项目 对应的是process.env.NODE_ENV == development 开发环境
npm run build 打包项目 对应的是process.env.NODE_ENV == production 生产环境
官网上说:
模式是 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
我是这样理解的,
development 模式 -----对应开发环境
test 模式 ------------------对应测试环境
production 模式 --------对应生产环境
那有人会问了,有什么用处呢?
别急,请往下看。
官网上有这样一段话:当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量,它的值将取决于模式,例如,在 production 模式下被设置为 “production”,在 test 模式下被设置为 “test”,默认则是 “development”。
这是什么意思呢?
意思是说:如果项目中我们没有设置NODE_ENV 变量,那么我们在项目中去使用process.env.NODE_ENV这个变量时,就会跟模式对应起来(相当于Vue CLI已经帮我们做好了设置)。
development 模式 -----process.env.NODE_ENV为development
test 模式 ------------------process.env.NODE_ENV为test
production 模式 --------process.env.NODE_ENV为production
那这可以改吗?
可以
我们可以通过传递 --mode 选项参数为命令行覆写默认的模式。
例如,如果你想要在构建命令中使用开发环境变量:
vue-cli-service build --mode development
更详细的解释如下:
我们知道
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
npm run serve 运行项目 对应的是process.env.NODE_ENV == development 开发环境
那我想npm run serve 运行项目 对应的是process.env.NODE_ENV == production 生产环境,怎么修改呢?修改如下
"scripts": {
"serve": "vue-cli-service serve --mode production",
"build": "vue-cli-service build --mode development"
},
那这个时候
npm run serve 运行项目 对应的是process.env.NODE_ENV == production 生产环境
npm run build 打包项目 对应的是process.env.NODE_ENV == development 开发环境
有人又有疑问了,–mode 选项参数为命令行覆写默认的模式,–mode后面可以随便写吗?
不可以
在没有设置环境变量的情况下,你写了其他的值,例如 “serve”: “vue-cli-service serve --mode dev”, 最后得到的process.env.NODE_ENV 为 development ,例如 “build”: “vue-cli-service build --mode dev”,在执行npm run build的时候会直接报错。
那我想自定义环境变量或者说自定义模式,怎么定义呢?
你可以在你的项目根目录中放置下列文件来指定环境变量:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对
例如:
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
强调一下
注意:只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
进入本文的重点内容:
我会在项目中新建三个文件,如图:
.env.dev文件中的内容
NODE_ENV=dev
VUE_APP_URL=http://192.168.14.22
.env.prod文件中的内容
NODE_ENV=prod
VUE_APP_URL=https://www.baidu.com
.env.dev文件中的内容
NODE_ENV=test
VUE_APP_URL=https://test.baidu.com
package.json中的script脚本命令:
"scripts": {
"serve": "vue-cli-service serve --mode dev",
"build.test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode prod"
},
对应如下:
npm run serve 运行项目 对应的是process.env.NODE_ENV == dev 开发环境
npm run build.test 打包项目 对应的是process.env.NODE_ENV == test 测试环境
npm run build 打包项目 对应的是process.env.NODE_ENV == prod 生产环境
这样就实现了在Vue CLI上自定义配置process.env环境变量
那我们在组件中使用的时候,也会拿到对应的环境变量。
created(){
console.log(process.env.NODE_ENV);
console.log(process.env.VUE_APP_URL);
}
关于如何在webpack中设置process.env环境变量,请看我的另一篇文章:process.env.NODE_ENV设置生产环境模式