1.process.env是什么

process.env 是Node.js 中的一个环境

可以在命令行输入命令查看环境信息

而且process.env在Vue CLI 项目是一个重要的概念

2.Vue Cli 三种运行模式

有以下三种运行模式

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

      我们查看package.json配置信息，当运行Vue CLI命令，开发环境运行npm run dev，要部署服务器发布生产环境时运行npm run build，他们正好对应Vue CLI中的development模式和production模式，就会把该模式下的NODE_ENV载入其中了

      那既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢？

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

会有先后顺序
一个环境文件只包含环境变量的“键=值”对：

#设置端口号
port=9999
# 开发环境配置
ENV = 'development'

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

3.演示运行模式

示例：development模式

在项目根目录创建.env.development

.env.development文件内容

# 开发环境配置
ENV = 'development'

#设置端口号
port=8081

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
BASE_URL_REAR='http://127.0.0.1:8080/'

vue.config.js配置如下
process.env当前运行的配置环境，用于读取对应配置文件的参数

//提示：process.env 是Node.js 中的一个环境，Vue CLI 项目中一个重要的概念
//:有以下三种运行模式
// development 模式用于 vue-cli-service serve
// test 模式用于 vue-cli-service test:unit
// production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

//当配置中有，配置port端口则使用配置的端口反之使用80端口
const port = process.env.port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  //build后的输出目录
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  lintOnSave: false,
  configureWebpack: {
    // devtool 添加这个debugger可以看源码
    devtool: 'cheap-module-source-map'
  },
  // webpack-dev-server 相关配置
  devServer: {
    //本机地址
    host: 'localhost',
    //获取port端口
    port: port,
    open: true,
    //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      //process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，如读取的数据是‘/api’,那么意思就是前端请求的/api路径都会被带来到，参数target的地址
      [process.env.VUE_APP_BASE_API]: {
        //代理的路径
        target: process.env.BASE_URL_REAR,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },
};

以上配置主要是为了，前端应用和后端 API 服务器没有运行在同一个主机上需要做代理为例。

运行 npm run dev 使用到的配置文件为.env.development
配置文件的端口，请求路径，后端服务器地址配置等

网页可以看出端口

可能请求接口也拼接了配置路径中的VUE_APP_BASE_API变量数据

4.定义自己配置环境

因为我们知道了配置环境的定义，那么只要我们遵循规则定义也可以配置自己的环境数据

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

我们在根路径添加配置.env.itmei配置如下

# 自己定义的开发环境配置
ENV = 'itmei'
#设置端口号
port=8088
# 前端请求路径
VUE_APP_BASE_API = '/itmei-api'
#后端服务器地址
BASE_URL_REAR='http://127.0.0.1:8080/'

添加完成后只需要在运行命令添加--mode 配置文件.env.后面自己定义的名称
如我自己配置的.env.itmei配置名称的itmei，为了方便我们在package.json中配置运行脚本

配置了上面的就可以使用npm命令运行

当然也可以直接使用Vue Cli命令运行vue-cli-service serve --mode itmei
首先会去找配置文件.env.itmei、.env.itmei.local 和 .env文件然后构建出生产环境应用

如果此时运行VueCli命令mode 的环境名称不存在，首先会去找.env.itmei00或.env.itmei00.local 或.env如找到就能正常运行找不到就报错，由于我定义了.env所以后面就使用.env的配置信息

当我把.env删除，找不到会报

building 2/2 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined