vue打包模式

本文介绍了如何在Windows和Linux间通过cross-env设置打包时的环境变量,探讨了dotenv在vue-cli-service中的应用,以及不同打包模式(development、test、production)与环境变量加载顺序。重点讲解了cross-env加载变量的原理和优先级规则。
摘要由CSDN通过智能技术生成

标题

一、cross-env

为了在window和linux上都可以设置上临时的进程环境变量(也就是node打包时候所需要的环境变量),需要使用到cross-env做跨平台环境变量配置,配置代码可以在node_modules>.bin>cross-env下找到;

二、dotenv

dotenv是一个读取.env开头类型文件的npm插件,vue-cli-service中使用该插件读取环境变量;

三、vue-cli-service

1.打包模式

vue-cli-service打包有三个模式,即development 、test 、production;不同的模式会使用不同的webpack配置

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

加载哪种模式取决于NODE_ENV设置的值,否则就是取默认值

  • 一般情况下,使用不同的命令加载的模式也会不同;serve运行development模式,test运行test模式,build运行production模式;
  • 如果使用"build": "vue-cli-service build -mode test指定mode参数为test,则该条命令使用test模式
  • 如果使用"build": "vue-cli-service build -mode custom指定mode参数为自定义的参数,则使用development模式,但是加载配置文件还是.env.custom配置文件
  • 如果指定mode为test,但是.env加载的NODE_ENV为production,则加载production模式
  • 如果外部环境变量存在NODE_ENV为test,则加载test模式

2.环境变量加载优先级

使用cross-env载入的环境变量>.env.mode环境变量>.env环境变量>mode参数设置>vue-cli-service命令默认环境变量;

因为需要在vue-cli-service执行之前就设置好环境变量,所以cross-env需要在vue-cli-service之前执行,例如下面代码

"build:test": "cross-env NODE_ENV=test vue-cli-service build"

为什么使用cross-env载入的环境变量不会被.env.mode环境变量覆盖,而是相反会覆盖.env.mode文件的环境变量呢?

因为vue-cli-service是在代码编译的时候检查源代码中process.env全局变量,然后使用dotenv加载好的配置文件替换掉该变量;
也就是本质上并没有将.env配置文件环境变量设置到node进程环境变量中,也没有这个必要,所以只要在vue-cli-service执行之前存在的环境变量都可以正常替换掉.env配置文件的环境变量;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值