使用vuepress踩到的坑:最近在研究尤大的vuepress,发现有许多的坑,给大家分享一下遇到的问题以及解决方案,避免大家走弯路,话不多少 直接上代码

1.根据官网项目创建完成后 .vuepress/templates 需要在创建的文件内初始化模板,不然会报 app is not defined.

模板内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>

2.导航栏所创建的文件夹,必须和.vuepress同级,并且每个文件夹内都必须有README.md文件才能正常显示

在这里插入图片描述
3.导航栏路径需在config.js中的nav里配置,点击导航栏才会显示侧边栏
在这里插入图片描述
4.打包时需要在config.js文件中配置 base:"./" 网上有人说此处为仓库名称。但是我改成仓库名称上线后文件还是报404,换成./就正常了 避免文件路径错乱而报404错误。
在这里插入图片描述
5.打包出错时

	Error: Content placeholder not found in template.
    at parseTemplate (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\vue-server-renderer\build.dev.js:8817:11)
    at new TemplateRenderer (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\vue-server-renderer\build.dev.js:8914:9)
    at createRenderer (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\vue-server-renderer\build.dev.js:9179:26)
    at createRenderer$1 (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\vue-server-renderer\build.dev.js:9637:10)
    at createBundleRenderer (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\vue-server-renderer\build.dev.js:9554:20)
    at Build.render (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\@vuepress\core\lib\node\build\index.js:71:21)
    at async App.build (C:\Users\Administrator\Desktop\vuepress-starter\node_modules\@vuepress\core\lib\node\App.js:499:5)

只需把templates文件夹中的 ssr.html 文件删除即可

6.打包完项目后访问(npm run build),直接用本地浏览器访问,结果出现黑块。解决方案:安装 vuepress-plugin-serve 插件就行了
在这里插入图片描述
7.打包上线放入github后进入页面报404的,打开项目下的 node_modules@vuepress\core\lib\client 下的 app.js 文件,找到下方这个片段:

const router = new Router({
  base: routerBase,
  mode: 'history',
  fallback: false,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      if (Vue.$vuepress.$get('disableScrollBehavior')) {
        return false
      }
      return {
        selector: decodeURIComponent(to.hash)
      }
    } else {
      return { x: 0, y: 0 }
    }
  }
})

把 mode: ‘history’, 注释掉就行了(让它默认为 hash 模式)修改完再次build后上传即可

8.上传到github push时需要填写个人token (之前是账号密码)
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐