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

Question

我正在使用 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（或其他 key/value）文件中的值注入到我的模板中，例如 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 不感兴趣。

Answer 1

.env.development & .env.production 可以做到这一点 - 你只需要注意以 VUE_APP_ 开始你的变量，比如 VUE_APP_GOOGLE_MAPS_API_KEY.

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

来源：vuejs.org

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

Create new variables like `BASE_URL` to use in index.html with vue-ci-service

vue.js

vue-cli