vuepress2.0使用教程（9）-引入百度统计及其他库

百家饭OpenAPI

已于 2022-09-30 16:58:32 修改

阅读量986

点赞数 1

分类专栏： Vuepress2 文章标签：前端 javascript html

于 2022-09-02 11:03:59 首次发布

本文链接：https://blog.csdn.net/baijiafan/article/details/126657618

版权

Vuepress2 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

这里先给搜索进来的同学提个醒：凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时，最新版本已不再使用。另外说个题外话，我查了下，我为数不多的搜索关键词里面，vuepress的占了大部分，这里感谢大家的关注，这个教程肯定有不合理的地方，如果有任何需要帮助的，大家都可以留言，我尽力解答。

上周忙着写百家饭平台v0.6新版本的使用帮助文档，没有更新我们的vuepress教程系列，这周继续来写。第8篇我们讲了如何扩展md的功能，这周我们介绍一下百度统计的引入办法，再介绍一下其他库的引入时需要注意的地方。

引入百度统计和微信JS

百度统计官方的引入版本是在html的头部引用一个js代码。vuepress 2也是这个逻辑，但是具体的引入办法不同。

vuepress 2需要在.vuepress/config.js里面进行修改，修改head这个字段：

const { path } = require('@vuepress/utils')
……

module.exports = {
  // site config
  lang: 'zh-CN',
  title: '百家饭OpenAPI平台',
  description: '百家饭OpenAPI平台主站',
  head: [['script', {}, `
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xcsafasdffsadfafd";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  `], ['script', { 'src': "https://res.wx.qq.com/open/js/jweixin-1.6.0.js" }]],

可以看到，我们设置head为一个数组的数组，里面的每一个数组元素的定义如下：

export type HeadConfig =
  | [HeadTagEmpty, HeadAttrsConfig]
  | [HeadTagNonEmpty, HeadAttrsConfig, string]

其中，第一个属性是HeadTagEmpty或者HeadTagNonEmpty，HeadTagEmpty可以是：'base' | 'link' | 'meta' | 'script'，HeadTagNonEmpty可以是

'title' | 'style' | 'script' | 'noscript' | 'template'，我们增加的两个script，一个是带内容的HeadTagNonEmpty，一个是不带内容的HeadTagEmpty。带内容的就是引入百度搜索的部分，直接把百度搜索页面中要求引入的js粘贴进来就可以了。

同时，第二个是引入微信js的功能。引入后，就可以使用wx.xxx来调用相关功能了。

引入sitemap

同时，为了支持google搜索索引，我们还引入了sitemap生成插件来生成sitemap，还是在config.js里面，引入下面的内容：

const { path } = require('@vuepress/utils')
const { sitemapPlugin } = require("vuepress-plugin-sitemap2");
……

module.exports = {
  // site config
  lang: 'zh-CN',
  title: '百家饭OpenAPI平台',
  description: '百家饭OpenAPI平台主站',
  ……
  plugins: [
    sitemapPlugin({
      hostname: "https://rongapi.cn"
    }),
  ],

注意第二行的内容，这个sitemapPlugin的正式名称是vuepress-plugin-sitemap2，这是他的npm链接：

vuepress-plugin-sitemap2 - npm (npmjs.com)

同样，我们使用的是v2版本

引入该插件，会在生成的dist文件夹下生成sitemap.xml文件，我们传入了hostname作为标准生成的服务器地址，具体配置可以进入上面的链接查看。

引入其他库时的注意事项

上面我们大体介绍了和搜索相关的两个库的引入方法。其他的库，基本都是import进来的，其实用法和普通vue区别不大。需要注意的一个问题是SSR判断问题。

例如我们用到了dayjs等库，还用到了particlesJS在主页生成一个随机图形

很多库都是只能在客户端环境下才可以使用的纯前端库，这种库，我们就不能直接import使用，如果使用，特别容易在编译的时候出错（dev的时候一般不出错）。这时，我们就需要把import放到__VUEPRESS_SSR__判断里面，并改成异步import，例如：

<script setup>

if (!__VUEPRESS_SSR__) {
  import("./particles.js").then(() => {
    window.particlesJS.load(
      "particles",
      "/assets/particles.json",
      function () {}
    );
  });
}

判断__VUEPRESS_SSR__确保我们这段代码只在客户端会被调用，而在服务器渲染部分会跳过。这种错误在ssr阶段报错比较隐蔽，我们遇到过的包括

require() of ES Module xxx.mjs not supported.

Invalid value used as weak map key at WeakMap.set (<anonymous>)

window is not defined

如果你遇到上面三种错误，都可以尝试我们的解决方案。