使用 vue-ci-service 创建新变量，例如 `BASE_URL` 以在 index.html 中使用答案

【问题标题】：Create new variables like `BASE_URL` to use in index.html with vue-ci-service使用 vue-ci-service 创建新变量，例如 `BASE_URL` 以在 index.html 中使用
【发布时间】：2021-04-01 09:42:42
【问题描述】：

我正在使用 vue-cli-service 构建一个 vue 应用程序，并且需要定义诸如（非秘密）api 密钥之类的东西 - 例如用于 Google 地图。

在 index.html 中我看到：<link rel="icon" href="<%= BASE_URL %>favicon.ico">

我希望能够创建自己的变量，例如 GOOGLE_MAPS_API_KEY，并根据 Node 的 development 或 production 模式设置不同的值。

我尝试了 .env.development 和 .env.production 文件，但我认为这些是设置 VUE 环境变量，在模板中呈现它们的过程中“为时已晚”。我收到一个错误：

Html Webpack Plugin:
  ReferenceError: GOOGLE_MAPS_API_KEY is not defined
  
  - index.html:8 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:8:11

如何将 .env（或其他键/值）文件中的值注入到我的模板中，例如 BASE_URL - 我想为每个节点创建一个文件 mode := development | production

我想在我的 index.html 文件中有这个：

 <script
          src="https://maps.googleapis.com/maps/api/js?key=<%= GOOGLE_MAPS_API_KEY %>&libraries=&v=weekly"
          defer
  ></script>

我该怎么做？我对在运行时动态加载 Javascript 不感兴趣。

【问题讨论】：

标签： vue.js vue-cli

【解决方案1】：

.env.development & .env.production 可以做到这一点 - 您只需注意以 VUE_APP_ 开头变量，例如 VUE_APP_GOOGLE_MAPS_API_KEY。

请注意，只有以 NODE_ENV、BASE_URL 和 开头的变量 VUE_APP_ 将静态嵌入到客户端包中 webpack.DefinePlugin。这是为了避免不小心暴露一个私人机器上可能具有相同名称的密钥。

来源：vuejs.org

【讨论】：