最近在研习 vue.config.js
文件,发现一行,甚是费解。
process.env.NODE_ENV
查阅资料后,发现武林众功法中对 process.env.NODE_ENV
没有解释的太清楚,遂决定以一功法记录。
process.env 为何物
言归正传。 process.env
是 Node.js
中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js
命令行工具直接进行查看。
而 NODE_ENV
就是其中的一个环境变量。这个变量主要用于标识当前的环境(生产环境,开发环境)。默认是没有这个环境变量的,需要自己手动配置。不同系统有不同的环境变量配置方式,在这里就不多加赘述。
NODE_ENV 与 Vue
NODE_ENV
变量只能在系统中配置吗?其实不然。在 Vue
项目中, Vue
提供了自己的配置方式。这就要涉及到 Vue CLI
中模式的概念了。 Vue CLI
文档说明了这个问题。
也就是说,在 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
。
修改方式如下,以键值对的方式:
除了以上的修改方式外,也可以在命令后直接使用 --mode
参数手动指定模式。当然,每个模式配置的变量也不只有 NODE_ENV
, 也可以通过配置其他的变量简化工作流程。
模式的应用
有了模式的概念,就可以根据不同的环境配置模式,就不用每次打包时都去更改 vue.config.js
文件了。比如在测试环境和生产环境, publicPath参数 (部署应用包时的基本 URL) 可能不同。遇到这种情况就可以在 vue.config.js
文件中,将 publicPath 参数设置为:
publicPath: process.env.BASE_URL
设置之后,再在各个 .env.[mode]
文件下对 BASE_URL
进行配置就行了,这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。
Tips: 即使不是生产环境,也可以将模式设置为 production ,这样可以获得 webpack 默认的打包优化。
所有评论(0)