javascript - 如何在 Nuxtjs 上放置一个简单的 JS 小部件/小工具块?
问题描述
Google Analytics 或 Statcounter 等一些服务提供了添加到网站的基本代码。将这种类型的脚本块集成到基于 Nuxtjs 的 web 应用程序/站点的最佳方法是什么?
来自 Statcounter 的用于添加 Nuxtjs 的示例代码块;
<!-- Default Statcounter code for project
http://www.example.com -->
<script type="text/javascript">
var sc_project=1234567;
var sc_invisible=1;
var sc_security="abcdefg";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/1234567/0/abcdefg/1/"
alt="Web Analytics"></a></div></noscript>
<!-- End of Statcounter Code -->
解决方案
您可以使用以下方式添加外部资源nuxt.config.js
:https ://nuxtjs.org/faq/#global-settings
例如:
// nuxt.config.js
export default {
head: {
script: [
{ src: 'https://www.statcounter.com/counter/counter.js', async: true },
{ src: '/customscript.js' } // customscript.js located in "static/" directory
]
}
}
您也可以将这些添加到组件中。例如,如果<noscript>
必须进入正文,您可以添加body: true
:https ://github.com/nuxt/nuxt.js/blob/dev/examples/meta-info/pages/index.vue#L18
推荐阅读
- java - Outlook 365 的 Java OAuth2 身份验证
- apache - 升级 macOS Big Sur 后自制的 httpd 不起作用
- ios - 使用较少的半样板设置 UIView(或对象)的多个属性 - Swift
- javascript - 索引格式错误:int() 以 10 为底的无效文字
- node.js - 如何查询令牌并在云功能内发送推送通知?
- java - Wicket IValidator 的错误消息中的链接是否可能?
- reactjs - Nextjs 项目未编译为 ES5
- flutter - Flutter AnimatedList 和 AnimatedController
- mysql - Mysql连接mariadb容器失败
- excel - 如何复制公式结果