Vue單頁面應用做預渲染的方法實例
前言
使用vue-cli打包項目一般為spa項目,眾所周知單頁面應用不利於SEO,有ssr(服務端渲染)和預渲染兩種解決方案,這裡我們隻討論預渲染
vue-cli2.0版本
安裝
npm install prerender-spa-plugin --save
webpack.prod.conf.js增加部分代碼
const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin') // 引入插件 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer plugins:[ // 配置PrerenderSPAPlugin new PrerenderSPAPlugin({ // 生成文件的路徑,也可以與webpakc打包的一致。 staticDir: path.join(__dirname, '../dist'), // 對應自己的路由文件,比如index有參數,就需要寫成 /index/param1。 routes: ['/', '/report','/genius','/index/param1'], // 一定要寫,如果沒有配置這段,也不會進行預編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),兩者的事件名稱要對應上。 renderAfterDocumentEvent: 'render-event' }) }) ]
在main.js中添加
new Vue({ el: '#pingce', router, store, components: { App }, template: '<App/>', // 添加mounted,不然不會執行預編譯 mounted () { document.dispatchEvent(new Event('render-event')) } })
router.js中設置mode: “history”
運行npm run build,看一下生成的 dist 的目錄裡是不是有每個路由名稱對應的文件夾。然後找個 目錄裡 的 index.html 用IDE打開,看文件內容裡是否有該文件應該有的內容。
每一個你所配置得路由都會生成一個文件夾,然後每個文件夾下邊都會生成一個index.html
vue-cli3.0版本
3.0的cli看上去簡潔多瞭,去掉瞭2.0 build和config等目錄,那我們怎麼去修改webpack的配置呢?
在根目錄下創建vue.config.js,進行你的配置。
安裝
npm install prerender-spa-plugin --save
vue-config.js中增加
const PrerenderSPAPlugin = require('prerender-spa-plugin'); // 引入插件 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路徑,也可以與webpakc打包的一致。 // 這個目錄隻能有一級,如果目錄層次大於一級,在生成的時候不會有任何錯誤提示,在預渲染的時候隻會卡著不動。 staticDir: path.join(__dirname,'dist'), // 對應自己的路由文件,比如about有參數,就需要寫成 /about/param1。 routes: ['/', '/product','/about'], // 必須配置不然不會進行預編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),兩者的事件名稱要對應上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
在main.js中添加
new Vue({ router, store, render: h => h(App), // 與 vue-config.js的renderAfterDocumentEvent: 'render-event'名字一定要對應上 mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
router.js 中設置mode: “history”
運行npm run build,看一下生成的 dist 的目錄裡是不是有每個路由名稱對應的文件夾。
總結
1.路由的模式最好使用history模式,不使用也可以運行生成文件,但是查看每個index.html文件內容師一樣的。
2.在3.0中和2.0中的設置大致是一樣的但是極個別的地方一定有註意
在2.0中,設置 staticDir: path.join(__dirname,’../dist’)
在3.0中,設置 staticDir: path.join(__dirname,’dist’)
如果這兩個設置錯瞭,運行npm run build 都會報錯。
如果你想設置每個頁面的 title 和 meta 信息推薦使用 [vue-meta-info]
到此這篇關於Vue單頁面應用做預渲染的文章就介紹到這瞭,更多相關Vue單頁面應用預渲染內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Vue開發網站seo優化方法
- vue終極性能優化方案(解決首頁加載慢問題)
- Vue 服務端渲染SSR示例詳解
- 聊聊vue番茄鐘與electron 打包問題
- vue單頁面改造多頁面應用詳解第1/2頁