vue預渲染

prerender-spa-plugin

安裝prerender-spa-plugin

• (插件使用見npm官網)[https://www.npmjs.com/package/prerender-spa-plugin]
• npm install prerender-spa-plugin --save-dev

---

配置prerender-spa-plugin插件

const PrerenderSpaPlugin = require('prerender-spa-plugin')
 plugins: [
    // 預加載
    new PrerenderSpaPlugin(
      // 輸出目錄的絕對路徑
      path.join(__dirname, '../dist'),
      // 預渲染的路由
      ['/home', '/a', '/b' ], 這裏加home是爲了作首頁路由是`/`的預渲染，將`/`根目錄重定向到`/home`
      {
        // 監聽到自定事件時捕獲
        renderAfterDocumentEvent: 'sketelon-render-event',// 呈現預渲染頁面的時間，例如document.dispatchEvent(new Event('sketelon-render-event'))
      }
    ),
 ]

---

設置路由,模式爲history

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ssss from '../components/mode';
const a = () => import('../components/a')
const b = () => import('../components/b')
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      redirect: "/home"
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/a',
      name: 'HelloWorld',
      component: ssss(a, 'a')
    },
    {
      path: '/b',
      name: 'HelloWorld',
      component: ssss(b, 'b')
    }
  ]
})

---

配置nginx

location / {
           # 本地vue項目打包後的目錄
            root   C:\Users\admin\Desktop\init\my-project\dist; 
			try_files $uri $uri/ /index.html;
        }

---

觸發

• 該例子中是以自定義事件的形式來觸發

document.dispatchEvent(new Event('sketelon-render-event'))

page-skeleton-webpack-plugin

(餓了麼的骨架屏幕方案)[https://github.com/ElemeFE/page-skeleton-webpack-plugin]