vue-cli 3.0如何配置多种开发环境下的环境变量

为何会须要配置多种环境变量

一个产品的开发过程当中,通常来讲都是会经历这么一个过程.本地发开--测试版本部署--测试--预上线--正式上线.对应的每个环节中的服务器地址,接口地址...都会不同。那么咱们须要怎么去处理这种状况。

怎么去配置环境变量

vue-cli 3.0脚手架构建的项目根目录中新建一个.env.[model]文件,model为一个变量，能够经过这个model的变量值来判断当前属于哪一个环境。model能够根据你的需求来修改，该文件中写上对应的键值对。你须要多少个环境，就建立多少个.env.[model]在根目录中，文件以下图：

.env.prod文件: NODE_ENV = "production" VUE_APP_URL = "prod" .env.dev文件: NODE_ENV = "production" VUE_APP_URL = "dev"

注意:配置环境的字段须要VUE_APP开头,这样才能被webpack识别。

如今咱们来到配置文件，这个配置文件的功能是为了判断当前打包环境是生产仍是测试，或者本地，固然你也能够有不少的环境。在配置文件中咱们经过process.env.VUE_APP_URL这个全局字段去判断环境，而后将对应的接口地址匹配上。注意一点上面的NODE_ENV = "production"不能够省略,vue-cli 3.0 会根据NODE_ENV = "production"来判断是不是生产环境,若是你改变了这个就会被默认NODE_ENV = "development,development和production模式下打包出来的包结构会不一样,为了一致性,因此配置文件的第一个字段应该设置成为NODE_ENV = "production"。

package.json文件下的脚本

"start": "vue-cli-service serve --mode location",
    "dev": "vue-cli-service build --mode dev",
    "prod": "vue-cli-service build --mode prod"
复制代码

script脚本中node dist-start.js是我打包项目以后须要在本地启动并查看的代码，能够忽略哦。

上面提到建立的.env.[model]文件，文件名中的model对应package.json文件中的打包脚本--model [model]。例如：当我如今想打包正式环境，正式环境对应.env.[model]就是.env.prod。在package.json的script中添加"prod": "vue-cli-service build --mode prod",prod这个对应配置文件名的model，这样webpack打包时会自动追踪到这个文件，并去读取其中的各类配置字段，咱们在项目中任意位置就能够经过process.env.xx拿到其中的xx配置属性。package.json文件脚本配置以下：

如今咱们只须要运行对应的脚本命令就能够打包对应环境的项目代码，例如：我如今须要打包prod环境下的项目，在控制台运行npm run prod，就能够执行正式环境打包。运行npm run dev,则能够打包测试环境。该模式也可用于自动化部署。

若有不对或者写的很差的地方欢迎提出，有问题的同窗欢迎提问哦!