Vue CLI模式和环境变量

模式是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文件中。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/tech/29794.html

发表评论

登录后才能评论