创建像"BASE_URL"这样的新变量，以便在带有vue-ci服务的index.html中使用

Question

我正在使用vue-cli服务来构建一个vue应用程序，并且需要定义一些东西，比如一个(非秘密的(api密钥，比如谷歌地图。

在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不感兴趣。

Answer 1

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

请注意，只有以开头的NODE_ENV、BASE_URL和变量VUE_APP_将静态嵌入客户端捆绑包webpack。DefinePlugin。这是为了避免意外暴露私人机器上可能具有相同名称的键。

来源：vuejs.org/