• Nuxt - 网站接入 51LA 网站统计（详细教程）

    前言

    官方提供的方案：https://www.yuque.com/dvqnxr/ztsh8g/gi8ybb

    在 Nuxt.js 项目开发中，集成 51LA 网站统计网上没有相关教程，

    本文从 0-1 完成，非常详细。

    第一步

    注意：位置无所谓，但注意后需要正确引入。

    打开项目 static 文件夹，再建个 js 文件夹，

    最后在里面建立一个 51LA.js 文件，一键复制以下代码：

    !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"这里替换为您的id",ck:"这里替换您的ck"});

    • 1

    第二步

    这些信息您需要在 51LA 官网 获取。

    打开刚才复制的代码，您需要更改下 id / ck ，如下图所示：

    在这里插入图片描述

    第三步

    到了这里，您已经完成了一半，剩下的只需项目要引入它即可。

    打开项目根目录 plugins 文件夹，在里面建一个 51LA.js 文件，写入以下代码：

    import '@/static/js/51LA.js'

    • 1

    紧接着，打开项目根目录 nuxt.config.js 配置文件，

    在 plugins 配置项中加入：

    { src: '@/plugins/51LA.js', ssr: false }

    • 1

    最终如下图所示：

    在这里插入图片描述

    第四步

    打开您的网站，F12 并刷新页面，查看是否引入了以下相关脚本：

    在这里插入图片描述

    如存在且正常引入（服务器状态码正常200），便成功了。

    本地环境下，默认会出现引入 http://sdk.51.la/js-sdk-pro.min.js，出现 403 的情况，不用管，部署到线上即可。

    写在后面

    您可能出现引入统计代码的 js 403 问题，这时候只需要将项目部署到线上即可。

    相关文档

    SEO

    Nuxt.js - 网站接入 51LA 网站统计（详细教程），Nuxt.js 项目怎么加入站长统计代码，nuxt.js 项目 Vue 怎么引入一段js脚本