Vue CLI 模式和环境变量

Posted 2022-02-02 书和咖啡

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

• development 被 vue-cli-service serve 使用

• test 由 vue-cli-service test:unit 使用

• production 由 vue-cli-service build 和 vue-cli-service test:e2e 使用

通过传递–mode选项标志，可以覆盖用于命令的默认模式。例如，如果要在build命令中使用开发变量：

vue-cli-service --mode development

运行 vue-cli-service 时，将从所有相应的文件加载环境变量，如果它们不包含 NODE_ENV 变量，则会相应地进行设置。

例如，NODE_ENV 将在生产模式下设置为 “production”，在测试模式下设置为 “test”，否则默认为 “development”；然后 NODE_ENV 将确定应用程序运行的主要模式-开发、生产或测试-并因此创建什么样的webpack配置。

• 将 NODE_ENV 设置为 “test” 时，Vue CLI会创建一个webpack配置，用于单元测试并对其进行优化，它不处理单元测试不需要的图像和其他资产。

• NODE_ENV=development 创建一个webpack配置，该配置启用HMR，不散列资产或创建供应商包，以便在运行dev服务器时能够快速重新构建。

• 运行 vue cli service build 时，无论要部署到什么环境，都应始终将节点环境设置为“生产”以获取可供部署的应用程序。

注意：如果 NODE_ENV 的环境中有默认值，则它在运行 vue-cli-service 命令时将删除或进行显示设置。

环境变量

环境变量我们可以从它的模式还有变量内容进行认识和了解：

我们可以通过在项目根目录中放置以下文件来指定环境变量：

.env               // 在所有情况下加载
.env.local         // 在所有情况下加载，被git忽略
.env.[mode]        // 仅以指定模式加载
.env.[mode].local  // 仅在指定模式下加载，被git忽略

一个环境文件仅包含环境变量的key = value对；

只有以开头的变量 VUE_APP_才会使用静态嵌入到客户端包中 webpack.DefinePlugin；

加载的变量将对所有 vue-cli-service 命令，插件和依赖项可用。

在客户端代码中使用 Env 变量

console.log(process.env.VUE_APP_SECRET)

在构建过程中，process.env.VUE_APP_SECRET 将被相应的值替换。在的情况下 VUE_APP_SECRET=secret，将被替换 "secret"。

所有已解析的env变量都将 public/index.html 在HTML插值中讨论的内部可用。

局部变量

默认情况下，.gitignore 将忽略本地env文件。

有时候我们有不需要提交到代码块的env变量时，而且项目托管也在公共存储库中时，这种情况下，我们应该改用 .env.local 文件。.local 也可以附加到特定于模式的env文件中。