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

Question

我正在尝试 integrate Heap's snippet 我的 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 条响应显示调用成功。但是在 Heap 上的实时数据屏幕中，事件没有被捕获。我还尝试了这个名为 vue-heap 的 NPM 包，它试图解决它，但它也有同样的问题。

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

我正在学习 Vue，所以如果以上逻辑有误，请随时纠正！谢谢:)

Answer 1

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

Interpolation

Since the index file is used as a template, you can use the lodash template

syntax to interpolate values in it:
<%= VALUE %> for unescaped interpolation;
<%- VALUE %> for HTML-escaped interpolation;
<% expression %> for JavaScript control flows.
In addition to the default values exposed by html-webpack-plugin, all client-side env variables are also available directly. For example, to use the BASE_URL value:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

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

Using .env variables in index.html VueJS project when installing Heap analytics' snippet

javascript

plugins

environment-variables

vue.js

heap-analytics

Interpolation