vue預渲染
阿新 • • 發佈:2019-05-24
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-skeleto