一、模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

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

-mode

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

1
vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。

NODE_ENV

如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 “test”，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序。

二、环境变量

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

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

一个环境文件只包含环境变量的“键=值”对：

1
2
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

Staging 模式

假设我们有一个应用包含以下 .env 文件：

1
VUE_APP_TITLE=My App

和 .env.staging 文件：

1
2
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
  • vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用。
  • vue-cli-service build --mode staging 会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件然后构建出生产环境应用。

这两种情况下，根据 NODE_ENV，构建出的应用都是生产环境应用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆写成了另一个值（My App (staging)）

三、实例

  1. 在项目根目录创建三个配置文件

配置文件

.env.development 内容如下：

1
2
NODE_ENV=development
VUE_APP_BASE_URL = http://localhost/dev + '《开发环境》'

.env.production 内容如下：

1
2
NODE_ENV=production
VUE_APP_BASE_URL=http://localhost/pro +  '《生产环境》'

.env.test 内容如下：

1
2
NODE_ENV=production
VUE_APP_BASE_URL=http://localhost/test +  '《测试环境》'
  1. 运行测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div >
      baseUrl:{{baseurl}}
  </div>
</template>

<script>
 export default {
  components: {},
  data: function() {
    return {
        baseurl: process.env.VUE_APP_BASE_URL
    };
  },
  created() {},
  mounted() {},
  methods: {
  }
};
</script>

package.json配置文件如下：

1
2
3
4
5
"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production",
  "test": "vue-cli-service build --mode test",
}

说明配置好了

配置文件

配置文件

执行 npm run serve ，则默认读取.env.development文件内容
结果：baseUrl: http://localhost/dev + ‘《开发环境》’
执行 npm run build ，则读取.env.production文件内容
结果：baseUrl: http://localhost/pro + ‘《生产环境》’

执行 npm run test ，则读取.env.test文件内容
结果：baseUrl:http://localhost/test + ’ 《测试环境》 ’