vuepress构建文档获取ReferenceError:pageMeta未定义

Question

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
...
...

Answer 1

tl；dr您需要降级作为vuepress一部分安装的vue路由器，以匹配~3.3.3。

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

AFAICT pageMeta与VuePress在服务器端(SSR(渲染页面有关。它被用在一个使用三大括号的模板中，vuepress生成的代码中有一些部分为这个标记分配数据，以便正确地替换。由于我在VuePress中没有接触任何与SSR相关的东西，我很确定我没有做任何明确导致这个特定问题的事情。

因此，我尝试禁用部分代码来定位导致这种不当行为的片段。事实证明，罪魁祸首是vue路由器。

我正在VuePress的enhanceApp.js中公开的vue路由器实例上应用导航保护。在这个防护装置中，我放入了符合vue路由器现有文档的代码。从本质上讲，由于可选的现有重定向表或前端信息，我正在重定向一些请求。

在vuepress dev中，此代码正在工作，但在浏览器控制台中生成错误。这些错误是关于未经处理的承诺拒绝，因为放弃了最初请求的路由转换，转而启动另一个路由转换，这似乎是使用vue路由器的合格意图。

不起作用：

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成功，但其结果在正确处理重定向方面不起作用。

IMHO问题是vue路由器拒绝了一些我没有从这里开始的承诺。有人可能会说，vuepress没有通过正确处理被拒绝的路由转换来采用API中的更改。但对于SSR来说也是如此(看看下面给出的第三个代码示例(。

作为一种解决方案，您可以尝试将vue路由器降级到3.2.0之前的版本。在我的例子中，vuepress正确地要求^3.1.3版本。然而，由于语义版本控制，这个选择器也涵盖了最新的3.4.3。

因此，vue路由器有一个突破性的变化，它是在3.2.0小版本中引入的。因为vue路由器不符合语义版本控制。

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