Javascript 在安装堆分析时，在index.html VueJS项目中使用.env变量'；一小条

我正在尝试安装我的VueJS应用程序。但是我有一个暂存和生产环境，所以使用

.env

时密钥必须是动态的，这在

index.html

中加载时是不可能的。因此，我尝试将其作为Vue插件：

//main.js    
import heap from "./plugins/heap";
Vue.use(heap, {key: process.env.VUE_APP_HEAP_ID});

// heap.js
export const heapinit = (e, t) => { [...] } // heap's init script

export default {
    install(Vue, options) {
        heapinit(options.key);
    }
}

当我在网络选项卡中看到堆中的200s响应显示成功调用时，这似乎起到了作用。但在堆上的实时数据屏幕中，没有捕获事件。我也尝试过这个名为“尝试解决它”的NPM包，但它也有同样的问题

更一般地说，VueJS应用程序集成JS片段的最佳实践是什么？JS片段不应该存在于

index.html

中，而应该存在于

main.JS

中，并且没有NPM包？另一个示例：

我正在学习Vue，因此如果上面的逻辑错误，请随时更正！

---

谢谢：）

您也应该能够将变量注入索引页面。见以下文档：

插值 由于索引文件用作模板，因此可以使用lodash 模板

在其中插入值的语法：

<%= VALUE %> for unescaped interpolation;
<%- VALUE %> for HTML-escaped interpolation;
<% expression %> for JavaScript control flows.

用于未缩放插值；
对于HTML转义插值；
对于JavaScript控制流。

除了由公开的默认值之外，还可以直接使用所有值。对于 例如，要使用基本URL值：

---

谢谢你的回答！插值工作得很好，但这是管理代码段的最佳方法，例如，使用Vue.use（）将它们移植到main.js中是否更好？简言之，这取决于具体情况。如果您正在制作的是一个小部件，并且可能会在其他应用程序中使用，并且该变量将由实现该应用程序的人提供，这可能是最好的方式，但通常情况并非如此，在js中使用env变量更为常见。对于小部件来说，这是有意义的。我想我想知道将代码片段转换成Vue插件是否比在index.html中使用插值代码更有价值。使用main.js的另一个选项可能是