vuepress踩坑总结

使用vuepress踩到的坑：最近在研究尤大的vuepress，发现有许多的坑，给大家分享一下遇到的问题以及解决方案，避免大家走弯路，话不多少直接上代码1.根据官网项目创建完成后 .vuepress/templates 需要在创建的文件内初始化模板，不然会报 app is not defined.模板内容：<!DOCTYPE html><html lang="en">&l

打小就霸

3682人浏览 · 2021-08-30 11:25:08

打小就霸 · 2021-08-30 11:25:08 发布

使用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 （之前是账号密码）
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^