Vue.js Nuxt：在插件中，如何向头部添加动态脚本标记？

我正在尝试为Nuxt构建一个Google Analytics插件，该插件将从CMS获取跟踪ID。我想我真的很接近

我有一个插件文件加载客户端只。该插件通过

插件：[{src:'~/plugins/google gtag.js'，mode:'client'}]

数组从

numxt.config.js

加载

从这里开始，主要问题是gtag脚本的URL中需要UA代码，因此我不能将其添加到

numxt.config.js

中的常规脚本对象中。我需要从商店获得那些UA代码（它是水合形式

nuxtServerInit

）

因此，我在插件中使用

head.script.push

添加带有URL中UA代码的gtag脚本。但这不会导致在第一个页面加载时添加脚本，但会在所有后续页面转换时添加脚本。因此，很明显，我在页面呈现时运行

head.script.push

但我不知道如何获取跟踪ID，然后将脚本添加到头部

//带“mode”的plugins/google.gtag.client.js:“client”
导出默认值（{store，app:{head，router，context}}，inject）=>{
//删除所有空的跟踪代码
常量代码=store.state.siteMeta.gaTrackingCodes.filter（布尔值）
//将脚本标记添加到头部
head.script.push({
src:`https://www.googletagmanager.com/gtag/js?id=${code[0]}`，
异步：true
})
console.log（'added script'）
//包括Google gtag代码并将其注入（因此，$gtag在页面/组件中工作）
window.dataLayer=window.dataLayer | |[]
函数gtag（）{
dataLayer.push（参数）
}
注入（'gtag'，gtag）
gtag（'js'，新日期（））
//从Vuex存储添加跟踪代码
代码。forEach（代码=>{
gtag（'config'，代码{
send_page_view:false//为避免在第一次页面加载时出现重复的页面跟踪，必须执行此操作
})
console.log（'已安装代码'，代码）
//每次路由器转换后，将每个代码的页面事件记录到Google
路由器。每个之后（到=>{
gtag（'event'，'page_view'，{page_path:to.fullPath}）
console.log（'afterEach'，代码）
})
})
}

我最终实现了这一功能，并在中使用它

撰写本文时的代码如下所示：

导出默认值（{store，app:{router，context}}，inject）=>{
//删除所有空的跟踪代码
let code=_get（存储，“state.siteMeta.gaTrackingCodes”，[]）
codes=codes.filter（布尔值）
//如果没有代码，则中止
如果（！code.length）{
if（context.isDev）console.log（“未设置Google Anlaytics跟踪代码”）
注入（“gtag”，（）=>{}）
返回
}
//如果处于开发模式，则中止，但注入虚拟函数，以便$gtag事件不会引发错误
if（context.isDev）{
log（“没有Google Anlaytics跟踪，因为您处于开发模式”）
注入（“gtag”，（）=>{}）
返回
}
//如果我们已经将脚本添加到头部，则中止
让gtagScript=document.getElementById（“gtag”）
if（gtagScript）{
返回
}
//将脚本标记添加到头部
让脚本=document.createElement（“脚本”）
script.async=true
script.id=“gtag”
script.src=“//www.googletagmanager.com/gtag/js”
document.head.appendChild（脚本）
//包括Google gtag代码并将其注入（因此，$gtag在页面/组件中工作）
window.dataLayer=window.dataLayer | |[]
函数gtag（）{
dataLayer.push（参数）
}
注入（“gtag”，gtag）
gtag（“js”，新日期（））
//从Vuex存储添加跟踪代码
代码。forEach（代码=>{
gtag（“配置”，代码{
send_page_view:false//为避免在第一次页面加载时出现重复的页面跟踪，必须执行此操作
})
//每次路由器转换后，将每个代码的页面事件记录到Google
路由器。每个之后（到=>{
gtag（“配置”，代码，{page_path:to.fullPath}）
})
})
}

---

如果不是在插件中，这是一本关于如何加载第三方脚本的好读物：

如果你看一下repo，它使用一个模块来执行脚本推送，因为模块是在插件之前构建的。@ohgoodwhy是的，这实际上是我从那里得到的。所以我需要一个插件和一个模块？不可能仅仅作为一个插件来执行此操作？我不确定是否有一个module也可以访问存储区。的确！模块在生命周期中启动的时间比插件要早，允许您将预编译注入头部，而插件执行预编译后捆绑包，这很可能就是您出现此问题的原因。@Ohgodwhy谢谢。关于如何访问模块中的存储区，有什么提示吗？我正好有sa我的问题。你找到解决方案了吗？这也是一个很好的读物：路由器转换应该是

事件
而不是
配置
：
gtag（“事件”，“页面视图”，“页面路径：到.fullPath}）
。