1

我正在尝试将 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 包，它试图解决它，但它也有同样的问题。

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

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

4

1 回答 1

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">
于 2021-04-08T19:01:57.357 回答