vuepress build docs得到ReferenceError：pageMeta未定义？答案

【问题标题】：vuepress build docs get ReferenceError: pageMeta is not defined?vuepress build docs得到ReferenceError：pageMeta未定义？
【发布时间】：2020-11-30 17:22:31
【问题描述】：

vuepress dev docs没问题，但是vuepress build docs报如下错误，为什么？

...
...
✔ Client
  Compiled successfully in 22.59s

✔ Server
  Compiled successfully in 15.41s

wait Rendering static HTML...
error Error rendering /404.html: false
undefined
...
...
ReferenceError: pageMeta is not defined
...
...

【问题讨论】：

贴出使用变量pageMeta的代码的sn-p。
@Gabriel Willemann 遇到了同样的错误，在我的来源中搜索 pageMeta 不会产生任何匹配项，除了一些由 VuePress 构建的文件，因此没有贡献的代码可以分享。

标签： vuepress

【解决方案1】：

tl;dr 您需要降级作为 vuepress 的一部分安装的 vue-router 以匹配 ~3.1.3。

我在尝试实现一些 VuePress 主题时基本上遇到了同样的错误。

AFAICT pageMeta 与 VuePress 在服务器端（SSR）渲染页面有关。它在使用三花括号的模板中使用，并且有部分 vuepress 生成的代码为该标记分配数据以正确替换。由于我没有在 VuePress 中触及任何与 SSR 相关的东西，我很确定我没有做任何明确导致此特定问题的事情。

所以我尝试禁用部分代码来定位导致这种不当行为的片段。事实证明，明显的罪魁祸首是 vue-router。

我正在 vue-router instance exposed in enhanceApp.js of VuePress 上应用导航保护。在那个守卫里面，我输入了代码complying with existing documentation for vue-router。本质上，由于可选的现有重定向表或前端信息，我正在重定向一些请求。

在vuepress dev 中，此代码正在运行，但在浏览器控制台中生成错误。这些错误与未处理的承诺拒绝有关，因为中止最初请求的路由转换以支持启动另一个似乎符合使用 vue-router 的意图。

不起作用：

export default function( context ) {
    const { router, siteData: { pages, themeConfig = {} } } = context;

    router.beforeEach( handleRedirects );

    function handleRedirects( to, from, next ) {
        const numPages = pages.length;

        for ( let i = 0; i < numPages; i++ ) {
            const { path, frontmatter } = pages[i];

            if ( path === to.path && frontmatter.redirect ) {
                if ( from.path === frontmatter.redirect ) {
                    next( false );
                } else {
                    next( frontmatter.redirect );
                }

                return;
            }
        }

        const redirections = themeConfig.redirect || {};
        if ( redirections.hasOwnProperty( to.path ) ) {
            next( redirections[to.path] );
            return;
        }

        next();
    }
}

确实有效：

export default function( context ) {
    const { router, siteData: { pages, themeConfig = {} } } = context;

    router.beforeEach( handleRedirects );

    function handleRedirects( to, from, next ) {
        const numPages = pages.length;

        for ( let i = 0; i < numPages; i++ ) {
            const { path, frontmatter } = pages[i];

            if ( path === to.path && frontmatter.redirect ) {
                if ( from.path === frontmatter.redirect ) {
                    next( false );
                } else {
                    next();  // <--- omitting passed target
                }

                return;
            }
        }

        const redirections = themeConfig.redirect || {};
        if ( redirections.hasOwnProperty( to.path ) ) {
            next();    // <--- omitting passed target
            return;
        }

        next();
    }
}

要明确一点：后一个使vuepress build 成功，但对于正确处理重定向而言，结果不起作用。

恕我直言，问题在于 vue-router 拒绝了我没有从这里开始的一些承诺。有人可能会声称 vuepress 未能通过正确处理被拒绝的路由转换来采用 API 更改。但SSR 也是如此（查看那里给出的第三个代码示例）。

作为解决方案，您可以尝试将 vue-router 降级到 3.2.0 之前的版本。就我而言，vuepress 正确地要求版本 ^3.1.3。但是，由于语义版本控制，此选择器也涵盖了最新的 3.4.3。

因此，vue-router 有一个重大更改，该更改已在次要版本 3.2.0 中引入。因为 vue-router 不符合语义版本控制。

恕我直言，这种行为变化根本不适合使用 vue-router 的代码，不应该必须关心路由是如何进行的，除非它导致一些有效的目标。因此，要求切换路由的代码不应导致必须处理的拒绝。这种反馈可能是可选的，但现在它是强制性的。

【讨论】：