bg

论vue-cli项目如何优雅的托管在github page上

deprecated!

old blog:old-blog new blog: cover

github page的局限

  本站是由github page托管的,它稳定且免费,但是正常情况下有几个缺点:

  • 网速贼慢,或者不翻墙压根无法访问
  • 无法使用vue router的history
  • 静态网站没办法自身更新

既然上面的缺点都是正常情况下才会有的,下面当然讲的是如何abuse了。sticker

jsdelivr非常🐂🍺的CDN

  第一个问题,当然是最大的问题: 访问github page非常非常非常慢,至于有多慢就得自己试试,由于已经解决了该问题,此站访问很快。

本节的主角是jsdelivr,它是一个免费的优质cdn网站,提供npm,github等cdn加速

  问题是如何在vue-cli中一键开启该cdn呢?下面用代码说明。

  1. 修改vue.config.js。由jsdelivr的说明可知,jsdelivr的cdn可以直接从url上加速github资源访问,所以我们修改vue.config.js如下:
module.exports = {
    ......
    /* 如果是开发环境就默认为根目录
     * 如果是生产环境就打包为cdn前缀的目录
     * name即是github账户名,repo是仓库名
    **/
    publicPath: process.env.NODE_ENV === 'development'?'/':(`https://cdn.jsdelivr.net/gh/${name}/${repo}@latest/dist`),
    ......
}
  1. 需要写在vue里的cdn文件,使用前缀:
const baseDynamicUrl = process.env.NODE_ENV === 'development'?'':(`https://cdn.jsdelivr.net/gh/${name}/${repo}@latest/${your directory}`)

  缺点:动态的内容,例如config或record.json这类数据依旧需要从github源站请求。而且,万一连404.html都无法访问呢sticker

使用404.html作为app

  这是一个基于github.io的404的骚操作。

思路是把404.html作为app,不写任何index.html以及README.md,让静态网站无论收到什么请求都404,然后手动写路由识别。下面介绍需要的步骤

  1. 编辑vue.config.js
module.exports = {
    ......
    /* 如果是开发环境就正常打包
     * 如果是生产环境就打包index为404-temp
    **/
    indexPath: process.env.NODE_ENV === 'development'?'index.html':'../404-temp.html',
    ......
}
  1. 手写路由识别,其实这里可以用vue router的history路由的,但当时我打算自己写一个简单的:
/********
 * route.js
********/

function routeInfo (){
    // 去掉最后的 '/'
    let pathname = window.location.pathname.replace(/^(.+?)\/*$/, '$1');
    for (let i of routes){
        const paramNames = [];
        // firefox,safari无法识别正则分组,要手动分组
        let regexp = i.path.replace(/\/:(\w+)/g, (a, b)=>{
            paramNames.push(b);
            return '/([^/]+)'
        });
        let matcher = pathname.match( new RegExp(`^${regexp}$`));
        if (matcher){
            const params = {};
            for (let idx=1;idx<=paramNames.length;idx++){
                params[paramNames[idx-1]] = matcher[idx];
            }
            return {
                params: params||{},
                ...i
            }
        }
    }
    return {
        name: null,
        params: {},
        title: '404',
        keywords: `静态博客 ${siteConfig.owner}的个人博客 404`,
        description: `${siteConfig.owner}的个人博客-${siteConfig.corner}`
    }
}

const siteConfig = require( '@/site-config')

const routes = [
    {
        path: '/',
        name: 'home',
        title: '主页',
        comp: ()=>import('@/views/home/index'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 主页`,
        description: `${siteConfig.owner}的个人博客-${siteConfig.corner}`
    },
    {
        path: '/article',
        name: 'article',
        title: '文章列表',
        comp: ()=>import('@/views/article/List'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 文章列表 博文`,
        description: `${siteConfig.owner}的个人博客-博客文章列表`
    },
    {
        path: '/article/:id',
        name: 'articleDetail',
        title: '文章详情',
        comp: ()=>import('@/views/article/Detail'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 文章详情`,
        description: `${siteConfig.owner}的个人博客-博客文章详情`
    },
    {
        path: '/record',
        name: 'record',
        title: '记录列表',
        comp: ()=>import('@/views/record/index'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 生活记录`,
        description: `${siteConfig.owner}的个人博客-个人生活记录`
    },
    {
        path: '/backend',
        name: 'backend',
        title: '后台管理',
        comp: ()=>import('@/views/backend/index'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 后端管理`,
        description: `${siteConfig.owner}的个人博客-后端管理`
    },
    {
        path: '/msg-board',
        name: 'msgBoard',
        title: '留言板',
        comp: ()=>import('@/views/msg-board/index'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 留言板`,
        description: `${siteConfig.owner}的个人博客-留言板`
    },
    {
        path: '/simple-code-simple-life',
        name: 'about',
        title: '简单代码-简单生活',
        comp: ()=>import('@/views/about/index'),
        keywords: `静态博客 ${siteConfig.owner}的个人博客 关于`,
        description: `${siteConfig.owner}的个人博客-关于`
    },
]

index.vue中这么使用:

<template>
......
<component :is="comp"/>
......
</template>
<script>
export default {
......
  created(){
    const route = routeInfo();
    document.title = route.title;
    document.head.querySelector('meta[name=keywords]').setAttribute('content', route.keywords);
    document.head.querySelector('meta[name=description]').setAttribute('description', route.keywords);

    this.showHead = route.name !== 'backend';
    this.routeNow = route.name;
    this.comp = route.comp || (() => import('@/views/404/index'));
  }
......
}
</script>

  这样在打包完成后就只有一个404-temp.html,随后进网站的backend>version,发布一个新版本,即自动把404-temp复制到404。完成后访问网站就全部会被转到404.html,然后由js去决定加载哪个页面,这操作够sticker吧。

  缺点:和SEO说拜拜sticker

静态网站自我更新

这个没啥介绍的,只能说github牛逼,此站的自我更新基于github rest api。 这里的自我更新指的是使用静态网站本身更新网站,实在想不到别的术语了sticker

  缺点:build代码并push后,必须迅速进backend发布版本(jsdelivr cdn更新之前),否则只能进github发布,这其实也不算问题已解决,现在只需第一次手动复制html


  就这么多了,本文结束!

阿鲁小黄脸
提交
无人问津暂无评论
icon
A-
0
A+
language