解决Vuepress码云部署及自动跳转404的问题

目录
  • Vuepress码云部署及自动跳转404
    • 介绍
    • 部署
    • GitHub 页面
    • 推到你仓库的的 gh-page 分支
    • 码云页面-Gitee Pages
  • Vuepress的简单使用
    • 安装

Vuepress码云部署及自动跳转404

介绍

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

部署

以下指南假设你将文档放置在项目的 docs 目录中，并使用默认的编译输出位置。

GitHub 页面

将 .vuepress/config.js 中的 base 设置为你的仓库名称。例如，如果你的仓库是 https://github.com/foo/bar ，则已部署的页面将在 https://foo.github.io/bar 上可用。在这种情况下，你应该将base设置为 “/bar/” 。

在你的项目中，运行：

# 构建
vuepress build docs
# 导航到构建输出目录
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'

推到你仓库的的 gh-page 分支

将 / 替换为你的信息

git push -f git@github.com:/.git master:gh-pages

你可以在 CI 设置中运行此脚本以启用每次推送时的自动部署

码云页面-Gitee Pages

config.js的设置和GitHub页面设置的方法是一致的

项目打包完成后将 docs-.vuepress-dist 中的所有文件上传到码云

开启码云的Gitee Pages服务

注：我上线后出现了首页自动跳转404的问题，是因为码云 Gitee Pages 服务的网站地址均为小写，将config.js中的 base 部分全部改成小写就能解决vuepress跳转404的问题

Vuepress的简单使用

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

安装

VuePress 需要 Node.js (opens new window)>= 8.6

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

1.创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2.初始化

 npm init

3.将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

npm install -D vuepress

注意

如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

4.创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

5.在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

6.在本地启动服务器

 npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。

首先来到config.json修改自己所需要的文件

// .vuepress/config.js
module.exports = {
  title:'《Ts教程》',
  dest:'docs',
  markdown: {
   lineNumbers: true
  },
  head: [
    ['link', {  rel: 'icon', href: '/logo.png' }]
  ],
  sidebarDepth: 2,
  themeConfig: {
    logo:'/logo.png',
    nav: [
      // { text: '和作者做同事', link: '/join_us' },
      { text: 'OpenHarmony仓库', link: 'https://gitee.com/openharmony/' },
      { text: '视频教程', link: 'https://space.bilibili.com/480883651' },
      { text: '关于我', link: 'http://jianguojs.cn/' },
    ],
    sidebar: [
      {
        title:"序",
        path:"/preface"
      },
      {
        title:"第一章：起步",
        path:"/chapter1/index",
        collapsable: false,
        children:[
          '/chapter1/mobile_development_intro',
          '/chapter1/flutter_intro',
          '/chapter1/install_flutter',
          '/chapter1/dart'
        ]
      },

    ]
  }
}

然后修改summary.md,等文件，

要运行的话

npm run dev就可以了

运行效果：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VuePress使用Algolia实现全文搜索

    VuePress使用Algolia实现全文搜索

    目录 引言 确认眼神 申请授权 实施部署 调试爬取 总结回顾 引言 Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务.Algolia 是一个数据库实时搜索服务,能够提供毫秒级的数据库搜索服务,并且其服务能以 API 的形式方便地布局到网页.客户端.APP 等多种场景. VuePress 官方文档就有 Algolia 搜索插件,可以直接安装使用,使用 Algolia 搜索最大的好处就是方便,它会自动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 授权服务,在网站上添加一

  • Vuepress生成文档部署到gitee.io的注意事项及说明

    Vuepress生成文档部署到gitee.io的注意事项及说明

    目录 Vuepress生成文档部署到gitee.io注意事项 在gitee中部署VuePress博客问题 Vuepress生成文档部署到gitee.io注意事项 1.静态资源要放在.vuepress/public目录下,比如创建一个assets/img/目录.把图片文件放在目录下面. 2.本地开发的时候,每次更新文件后,需要运行 vuepress dev .命令重新发布. 3.运行vuepress build .命令会编译出来一个静态文件的dist目录.只要把这个目录的东西push到gitee.

  • vuepress实现自定义首页的样式风格

    vuepress实现自定义首页的样式风格

    目录 vuepress自定义首页的样式风格 正文 vuepress2.x修改默认样式的小技巧 详解 vuepress自定义首页的样式风格 如何自定义vuepress的首页设计风格呢?比如,我希望首页下面的红框内容是可点击的: 请看正文步骤 正文 在docs -> .vuepress下新建theme文件夹,再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-defaul

  • Vuepress使用vue组件实现页面改造

    Vuepress使用vue组件实现页面改造

    目录 引言 前置环境 使用 vue 组件 安装插件 配置插件 创建 vue 组件 使用 vue 组件 引言 只是单纯的用 vuepress 写个 markdown 文档,的确会处处受限,满足不了定制化的样式和功能,有时只是简单的修改下某个页面,或者做些组件演示的内容,而不是开发一整套主题.所以研究下如何在项目中使用 vue 组件还有非常有必要的,毕竟也没那么难. 前置环境 node 环境 node v16.13.0 VuePress 版本 VuePress v2.0.0-beta.48 每个版本

  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    目录 VuePress页面乱码问题 官方步骤 VuePress 初探 建立文件夹 安装 vuepress 初始化 新建文件夹 配置页面 启动 乱码 VuePress页面乱码问题 公司有一个业务场景,需要用到VuePress,所以我这边就研究了一下.VuePress的官方文档写得很详细,步骤也很清晰. 官方步骤 # 创建文件夹 mkdir vuepress-starter cd vuepress-starter # 初始化 git init npm init # 安装Vue Press npm i

  • vuepress打包部署踩坑及解决

    vuepress打包部署踩坑及解决

    目录 vuepress打包部署踩坑记录 vuepress打包报错:error Error rendering /: 问题 方案1 方案2 vuepress打包部署踩坑记录 官网教程 官网给了多种部署方案,这里我才用的是部署到github上 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释): #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/

  • 关于vuepress部署出现样式的问题及解决

    关于vuepress部署出现样式的问题及解决

    目录 vuepress部署出现样式问题 vuepress个人博客部署遇到的一些问题 1.js和css出现404问题 2.每次都要重复操作打包.运行.上传github很麻烦怎么办? 3.github.io无法打开怎么办? vuepress部署出现样式问题 以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题. 本地测试完全可以 然而打包之后就彻底乱了 即使是自己本地打包成dist之后也会出现相同的问题 有点困扰,应该是打包配置的问题 通过修改index.html里的内容.

  • 解决Vuepress码云部署及自动跳转404的问题

    解决Vuepress码云部署及自动跳转404的问题

    目录 Vuepress码云部署及自动跳转404 介绍 部署 GitHub 页面 推到你仓库的的 gh-page 分支 码云页面-Gitee Pages Vuepress的简单使用 安装 Vuepress码云部署及自动跳转404 介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载

  • 解决vue项目路径不正确,自动跳转404的问题

    目录 vue项目路径不正确,自动跳转404 第一种方法 第二种 vue路由判断跳转404页面 vue项目路径不正确,自动跳转404 第一种方法 使用vuerouter钩子函数beforeEach,每次进行路由跳转时都进行判断,若页面不存在就跳转到404页面. import Error from ' '   const router = new Router({     routes:[         name: 'error',         path: '/error',        

  • PC端微信扫码支付成功之后自动跳转php版代码

    本文实例为大家分享了php微信扫码支付成功之后自动跳转的具体代码,供大家参考,具体内容如下 场景: PC端   微信扫码支付 结果: 支付成功 自动跳转 实现思路: 支付二维码页面,写ajax请求支付状态,请求到结果,无论成功还是失败,都跳转到相应的结果页面 具体实现方法: html部分: 支付结果状态设定: 0 未支付  1 支付成功 2 支付失败 <input type="hidden" id="order_id" value="<?php

  • 解决thinkPHP 5 nginx 部署时,只跳转首页的问题

    在使用tp5时候把它部署到服务器上发现一个奇葩的事情,就是它默认访问config配置的默认页,无论怎么跳转到其他接口都不好使,最终重写了  Nginx 的配置文件解决了这个问题 server{ listen 80; server_name www.XXXX.com; index index.php index.html index.htm; root /var/www/didu; location ~ \.php #原来这个里有"$" 去掉就ok { #fastcgi_pass uni

  • Django 解决阿里云部署同步数据库报错的问题

    写在最前面: 在阿里云租了一台服务器,搭建了一个博客,采用的是Ubuntu+Django+uwsgi+nginx+mysql的结构. 运行了一段时间后,我发现我忘记了django自带后台的密码! 然后很常规的修改密码的操作,就是无法登陆! 然后想再创建一个超级用户,登上去看看什么情况,结果创建超级用户又报错? 可是本地环境是ok的,然后同步数据库出错...反正没有对的. 然后同步数据库报错如下: 手机端截的图,查了一下报错,应该是setting.py的配置问题,然后我把生产上的代码拿下来看了下.

  • Apache无法自动跳转却显示目录的解决方法

    Apache无法自动跳转却显示目录的解决方法

    Apache无法自动跳转却显示目录这是因为Apache服务器下conf/httpd.conf没有配置好,其默认是不跳转,直接显示目录 首先,我们需要禁止Apache直接显示目录. 方法在搜索Options Indexes FollowSymLinks,将其该为Options FollowSymLinks 其实,解决Apache无法自动跳转的问题,这是因为Apache本来只是一个http服务器,不会自动跳转到index.php页面.需要定位<IfModule dir_module>这一项,将Di

  • 扫二维码自动跳转【java】详解

    扫二维码自动跳转【java】详解

    这个帖子网上很多了,但是都是讲理论知识,我呢,喜欢搞代码.既然搞完了,就贴出来备忘一下,也可以分享一下. 重复理论步骤: 1.进入网站-生成UUID 2.跳转到二维码页面(二维码包含UUID) 3.二维码页面写一个js,自动请求服务器查询二维码是否被扫 4.服务器收到请求,查询,如果还没被扫,进入等待,先不返回结果 5.一旦被扫,立即返回结果,页面js收到响应,做后续处理 OK,步骤是这样的没错,不过有一点缺点,步骤3中如果请求超时怎么办. 这个微信web登录有示例,服务器被请求后,持续等待25

  • 完美解决浏览器输入http被自动跳转至https问题

    完美解决浏览器输入http被自动跳转至https问题

    在将服务尝试着从http协议往https协议迁移成功之后,又出于测试调试的目的将服务转回到http协议,却发现在浏览器输入http会被自动跳转到https. HTTP Strict Transport Security (HSTS) is an opt-in security enhancement that is specified by a web application through the use of a special response header. Once a support

  • Java Web实现session过期后自动跳转到登陆页功能【基于过滤器】

    本文实例讲述了Java Web实现session过期后自动跳转到登陆页功能.分享给大家供大家参考,具体如下: 通过过滤器的方式实现 session过期后自动跳转到登陆页 过滤器只在与servlet规范2.3版兼容的服务器上有作用.如果你的Web应用需要支持旧版服务器,就不能使用过滤器. 一.建立基本过滤器 建立一个过滤器涉及下列五个步骤: 1)建立一个实现Filter接口的类SessionFilter .这个类需要三个方法,分别是:doFilter.init和destroy.doFilter方法

  • 微信实现自动跳转到用其他浏览器打开指定APP下载

    目前的APP基本都支持二维码扫描下载,二维码下载也成为了大家用起来很顺手的一种方式.由于微信的用户基本占据了国内市场的90%,说到扫一扫用户第一个想到的就是打开微信扫一下,通过微信分享APP,再从分享的链接下载apk/ios包.故用户通常都是使用微信打开链接或扫描二维码前往下载页,这是刚需. 在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况.这时需要微信跳转外部浏览器打开页面的功能,对于ios用户默认可以通过微信内置浏览器点击右上角的更多按钮从而选择"在浏览器中打开&

随机推荐