Vue cli 模式和环境变量

CQY
189 阅读4分钟

模式

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

  • development 模式用于 vue-cli-service server
  • test模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e 你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：
vue-cli-service build --mode development

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

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

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

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

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

环境变量

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

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

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

FOO = bar
VUE_APP_NOT_SECRET_CODE = some_value

请注意，只有 NODE_ENV, BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端的代码中。这是避免意外公开机器上可能具有相同名称的私钥。

    环境文件加载优先级
    
    为一个特定模式准备的环境文件（例如.env.production）将会比一般的环境文件（例如.env）
    拥有更高的优先级。
    此外，Vue CLI启动时已经存在环境变量拥有最高的优先级，并不会被 .env 文件覆盖
    .env 环境文件是通过运行 vue-cli-service 命令载入的，因为环境文件发生变化，你需要重启服务。

实例：Staging模式

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

VUE_APP_TITLE = my app

和 .env.staging 文件:

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 被覆写成了另一个值。

在客户端侧代码中使用环境变量

只有以VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端的包中。可以在代码中这样访问他们：

console.log(process.env.VUE_APP_SECRET)

在构建过程中， process.env.VUE_APP_SECRET将会被相应的值所取代。在 VUE_APP_SECRET = secret 的情况下，它会被替换为 secret。

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

  • NODE_ENV 会是 development、production或者test中的一个。具体的值取决于应用运行的模式。
  • BASE_URL 会是 vue.config.js中 publicPath 选项相符，即应用会部署到的基础路径。

所有解析出来的环境变量都可以在 public/index.html 中以HTML插值中介绍的方式使用。

只有本地有效的变量

有的时候可能有一些不应该提交到代码库中的变量，尤其是你的项目托管在公共仓库时。这种情况下应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略， 且出现在.gitignore。

.local 也可以加在指定模式的环境文件上， 比如 .env.development.local 将会在development模式下被载入，且被git忽略

avatar
文章
阅读
粉丝