 github page 的局限
本站是由 github page 托管的，它穩(wěn)定且免費(fèi)，但是正常情況下有幾個(gè)缺點(diǎn)：  網(wǎng)速賊慢，或者不翻墻壓根無(wú)法訪(fǎng)問(wèn)
無(wú)法使用 vue router 的 history 靜態(tài)網(wǎng)站沒(méi)辦法自身更新
接下來(lái)依次展示我的三個(gè)小技巧了！
jsdelivr 非常????的 CDN第一個(gè)問(wèn)題，當(dāng)然是最大的問(wèn)題: 訪(fǎng)問(wèn) github page 非常非常非常慢，至于有多慢就得自己試試，由于已經(jīng)解決了該問(wèn)題，此站訪(fǎng)問(wèn)很快。 本節(jié)的主角是 jsdelivr，它是一個(gè)免費(fèi)的優(yōu)質(zhì) cdn 網(wǎng)站，提供 npm，github 等 cdn 加速
問(wèn)題是如何在 vue-cli 中一鍵開(kāi)啟該 cdn 呢？下面用代碼說(shuō)明。 修改 vue.config.js。由 jsdelivr 的說(shuō)明可知，jsdelivr 的 cdn 可以直接從 url 上加速 github 資源訪(fǎng)問(wèn)，所以我們修改 vue.config.js 如下:
javascriptmodule.exports = {
......
/* 如果是開(kāi)發(fā)環(huán)境就默認(rèn)為根目錄
* 如果是生產(chǎn)環(huán)境就打包為cdn前綴的目錄
* name即是github賬戶(hù)名,repo是倉(cāng)庫(kù)名
**/
publicPath: process.env.NODE_ENV === 'development'?'/':(`https://cdn./gh/${name}/${repo}@latest/dist`),
......
}需要寫(xiě)在 vue 里的 cdn 文件，使用前綴：
javascriptconst baseDynamicUrl = process.env.NODE_ENV === 'development'?'':(`https://cdn./gh/${name}/${repo}@latest/${your directory}`)缺點(diǎn)：動(dòng)態(tài)的內(nèi)容，例如 config 或 record.json 這類(lèi)數(shù)據(jù)依舊需要從 github 源站請(qǐng)求。而且，萬(wàn)一連 404.html 都無(wú)法訪(fǎng)問(wèn)呢 使用 404.html 作為 app這是一個(gè)基于 的 404 的騷操作。 思路是把 404.html 作為 app，不寫(xiě)任何 index.html 以及 README.md，讓靜態(tài)網(wǎng)站無(wú)論收到什么請(qǐng)求都 404，然后手動(dòng)寫(xiě)路由識(shí)別。下面介紹需要的步驟
編輯 vue.config.js：
jsmodule.exports = {
......
/* 如果是開(kāi)發(fā)環(huán)境就正常打包
* 如果是生產(chǎn)環(huán)境就打包index為404-temp
**/
indexPath: process.env.NODE_ENV === 'development'?'index.html':'../404-temp.html',
......
}手寫(xiě)路由識(shí)別，其實(shí)這里可以用 vue router 的 history 路由的，但當(dāng)時(shí)我打算自己寫(xiě)一個(gè)簡(jiǎn)單的：
js/********
* route.js
********/
function routeInfo (){
// 去掉最后的 '/'
let pathname = window.location.pathname.replace(/^(.+?)\/*$/, '$1');
for (let i of routes){
const paramNames = [];
// firefox，safari無(wú)法識(shí)別正則分組，要手動(dòng)分組
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: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 404`,
description: `${siteConfig.owner}的個(gè)人博客-${siteConfig.corner}`
}
}
const siteConfig = require( '@/site-config')
const routes = [
{
path: '/',
name: 'home',
title: '主頁(yè)',
comp: ()=>import('@/views/home/index'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 主頁(yè)`,
description: `${siteConfig.owner}的個(gè)人博客-${siteConfig.corner}`
},
{
path: '/article',
name: 'article',
title: '文章列表',
comp: ()=>import('@/views/article/List'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 文章列表 博文`,
description: `${siteConfig.owner}的個(gè)人博客-博客文章列表`
},
{
path: '/article/:id',
name: 'articleDetail',
title: '文章詳情',
comp: ()=>import('@/views/article/Detail'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 文章詳情`,
description: `${siteConfig.owner}的個(gè)人博客-博客文章詳情`
},
{
path: '/record',
name: 'record',
title: '記錄列表',
comp: ()=>import('@/views/record/index'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 生活記錄`,
description: `${siteConfig.owner}的個(gè)人博客-個(gè)人生活記錄`
},
{
path: '/backend',
name: 'backend',
title: '后臺(tái)管理',
comp: ()=>import('@/views/backend/index'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 后端管理`,
description: `${siteConfig.owner}的個(gè)人博客-后端管理`
},
{
path: '/msg-board',
name: 'msgBoard',
title: '留言板',
comp: ()=>import('@/views/msg-board/index'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 留言板`,
description: `${siteConfig.owner}的個(gè)人博客-留言板`
},
{
path: '/simple-code-simple-life',
name: 'about',
title: '簡(jiǎn)單代碼-簡(jiǎn)單生活',
comp: ()=>import('@/views/about/index'),
keywords: `靜態(tài)博客 ${siteConfig.owner}的個(gè)人博客 關(guān)于`,
description: `${siteConfig.owner}的個(gè)人博客-關(guān)于`
},
]在 index.vue 中這么使用： js<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>
這樣在打包完成后就只有一個(gè) 404-temp.html，隨后進(jìn)網(wǎng)站的 backend>version，發(fā)布一個(gè)新版本，即自動(dòng)把 404-temp 復(fù)制到 404。完成后訪(fǎng)問(wèn)網(wǎng)站就全部會(huì)被轉(zhuǎn)到 404.html，然后由 js 去決定加載哪個(gè)頁(yè)面，這操作夠 吧。 缺點(diǎn)：和 SEO 說(shuō)拜拜  靜態(tài)網(wǎng)站自我更新
這個(gè)沒(méi)啥介紹的，只能說(shuō) github 牛逼，此站的自我更新基于 github rest api。
這里的自我更新指的是使用靜態(tài)網(wǎng)站本身更新網(wǎng)站，實(shí)在想不到別的術(shù)語(yǔ)了
缺點(diǎn)：build 代碼并 push 后，必須迅速進(jìn) backend 發(fā)布版本 (jsdelivr cdn 更新之前)，否則只能進(jìn) github 發(fā)布，這其實(shí)也不算問(wèn)題。已解決，現(xiàn)在只需第一次手動(dòng)復(fù)制 html
就這么多了，本文結(jié)束！
|
