前言：昨天带我的前辈给了我一个新项目的代码，这是实习以来到手里的第二个项目，到目前来说上一个项目已经在手里盘了三个月，不知道这个项目会不会在手里盘三个月。这周末应该写一个三个月回顾与反思了。

项目到手以后最先开始启动代码，又看见了那几个熟悉又陌生的文件和奇怪的变量。

文件如下：

变量如下：

process.env.NODE_ENV

process.env.VUE_APP_CURENV

process.env.VUE_APP_BASE_API

process.env.port

process.env.npm_config_port

process.env.npm_config_preview

第一个项目的时候也遇到过这些变量，当时问过辅导员但没太留意，今天浅浅学习一下。

什么是process.env

process：过程，进程；代表现在的node进程

process.env：是nodejs中的环境对象，保存这系统环境的变量信息。

NODE_ENV：是用户自定义的变量，默认是没有的，需要自己手动配置。主要作用是用来判断当前是生产环境还是开发环境。

如何设置环境变量

配置环境变量的方法不止一个，我目前就接触到使用vue-cli脚手架配置的方法。

自学过程中

package.json文件中：

  "scripts": {
    "serve": "vue-cli-service serve",  //本地开发运行，会把process.env.NODE_ENV设置为'development'
    "build": "vue-cli-service build"  //默认打包模式，会把process.env.NODE_ENV设置为'production'
  },

公司项目中

package.json文件中：

  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build:173": "vue-cli-service build --mode 173",
    "build:pro": "vue-cli-service build --mode pro"
  },

第一次见到后面的--mode dev/173/pro感觉到很奇怪，之前在自学过程中一直没遇到过。

--mode是确定现在的环境

--mode ***node会把.env.***文件中的变量当作系统环境对象中的变量，可以在vue项目中使用。只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。并且env.local和env.***.local文件会被git忽略不会上传到仓库。

例子

.env.aaaa文件

NODE_ENV = '我就试一下'
VUE_APP_BASE_API = 'url路径'

package.json文件的scripts

代码中

onMounted(function(){
    console.log(process.env.NODE_ENV, process.env.VUE_APP_BASE_API);
})

控制台执行 npm run test，会到.env.aaaa文件读取环境变量

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

vuecli关于环境变量更多的信息

vue-cli process.env环境变量和env.文件

什么是process.env

如何设置环境变量

自学过程中

公司项目中

例子