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

deprecated!

old blog:old-blog new blog:

github page的局限

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

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

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

jsdelivr非常🐂🍺的CDN

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

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

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

修改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`),
    ......
}

需要写在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，然后手动写路由识别。下面介绍需要的步骤

编辑vue.config.js：

module.exports = {
    ......
    /* 如果是开发环境就正常打包
     * 如果是生产环境就打包index为404-temp
    **/
    indexPath: process.env.NODE_ENV === 'development'?'index.html':'../404-temp.html',
    ......
}

手写路由识别，其实这里可以用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 吧。