在安装堆分析的片段时在 index.html VueJS 项目中使用 .env 变量

Question

我正在尝试将 Heap 的代码片段集成到我的 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);
    }
}

这似乎有效，因为我在网络选项卡中看到来自 Heap 的 200 条响应，显示成功调用。 但是在堆上的实时数据屏幕中没有捕获事件。 我还尝试了这个名为vue-heap的 NPM package 试图解决它，但它也有同样的问题。

所以更一般地说，VueJS 应用程序集成 JS 片段的最佳实践是什么？这些片段不应该存在于index.html中，但在main.js中，并且没有 NPM ZEFE90A8E604A7C840E88D03A6876F？ 另一个例子： HubSpot 跟踪代码

我正在学习 Vue，如果有错误，请随时纠正上述任何逻辑：谢谢 :)

Answer 1

您也应该能够将变量注入索引页面。 请参阅以下文档： html-and-static-assets

插值

由于使用索引文件作为模板，所以可以使用 lodash 模板

在其中插入值的语法：

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

除了html-webpack-plugin暴露的默认值之外，所有客户端环境变量也可以直接使用。 例如，要使用 BASE_URL 值：

 <link rel="icon" href="<%= BASE_URL %>favicon.ico">