vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式
腳手架配置預(yù)渲染及prerender-spa-plugin配置
預(yù)渲染: 便于seo優(yōu)化;既查看源碼 是 html格式
用到插件:
cnpm install prerender-spa-plugin --save
腳手架2.0:(自己的是2.0)
1.build/webpack.prod.conf.js 配置
const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackConfig, { plugins:[ // vue-cli生成的配置就有了 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), // 配置PrerenderSPAPlugin new PrerenderSPAPlugin({ // 生成文件的路徑,也可以與webpakc打包的一致。 staticDir: path.join(__dirname, '../dist'), // 對應(yīng)自己的所有路由文件,比如index有參數(shù),就需要寫成 /index/param1。這個其實不需要;千萬不要加'/'這個 嵌套路由得commonquestion直接寫即可 routes: ['index','...','/commonQuestion','/commonQuestion/questionList','/commonQuestion/questionDetailInfo'], // ; renderer: new Renderer({ inject: { // 可選;最好還是用 foo: 'bar' }, headless: false, // 可選;最好用 renderAfterTime: 5000, // 通過實踐是必選 官網(wǎng)說可選有誤 一定要必選 renderAfterDocumentEvent: 'render-event' // 可選;最好用 }) }), ] })
2.路由得index.js添加屬性:
? mode:‘history’,
修改config/index.js 中的build的 assetsPublicPath: ‘/’ ;不然會導(dǎo)致刷新頁面路徑錯亂導(dǎo)致樣式或者js丟失;
修改main.js
new Vue({ el: '#app', router, store, // 如果需要了切記引入啊 切記需要掛載的全部掛載上去 render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } })
腳手架3.0 (未驗證,應(yīng)該行)
1.build/webpack.prod.conf.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打包的一致。 // 下面這句話非常重要?。。? // 這個目錄只能有一級,如果目錄層次大于一級,在生成的時候不會有任何錯誤提示,在預(yù)渲染的時候只會卡著不動。 staticDir: path.join(__dirname,'dist'), // 對應(yīng)自己的路由文件,比如a有參數(shù),就需要寫成 /a/param1。 routes: ['/', '/product','/about'], // 這個很重要,如果沒有配置這段,也不會進行預(yù)編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, renderAfterTime: 5000, // 必選哈 // 在 main.js 中 document.dispatchEvent(new Event('render-event')),兩者的事件名稱要對應(yīng)上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
2.main.js配置
new Vue({ ? router, ? store, ? render: h => h(App), ? mounted () { ? ? document.dispatchEvent(new Event('render-event')) ? } }).$mount('#app')
其他修改同2.0;
記錄vue預(yù)渲染prerender-spa-plugin的坑
安裝
命令:cnpm install prerender-spa-plugin -D //避免報錯,會自動下載文件等待
找到build下的webpack.prod.conf.js
頭部添加
const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [ ? ? // 配置PrerenderSPAPlugin預(yù)渲染 ? ? ? ?new PrerenderSPAPlugin({ ? ?// 生成文件的路徑,也可以與webpakc打包的一致。 ? ? ? staticDir: path.join(__dirname, '../dist'), ? // 對應(yīng)自己的路由文件,比如index有參數(shù),就需要寫成 /index/param1。 ? ? ? routes: ['/','/about'], ? // 這個很重要,如果沒有配置這段,也不會進行預(yù)編譯 ? ? ? renderer: new Renderer({ ? ? ? ? ?// inject:{ ? ? ? ? ? ?// foo:'bar' ? ? ? ? // }, ? ? ? ?// 觸發(fā)渲染的時間,用于獲取數(shù)據(jù)后再保存渲染結(jié)果 ? ? ? ?renderAfterTime: 5000, ? ? ? ? ? ?headless: false, ? ? ? ? ? ?// 在 main.js 中 document.dispatchEvent(new Event('render-event')),兩者的事件名稱要對應(yīng)上。 ? ? ? ? ? renderAfterDocumentEvent: 'render-event' ? ? ? ?}) ? ?}), ]
在main.js中
? ?new Vue({ ? ? ? ? el: '#app', ? ? ? ? render: h => h(App), ? ? ? ? mounted () { ? ? ? ? ? ? document.dispatchEvent(new Event('render-event')) ? ? ? ? } ? ?}) //在HtmlWebpackPlugin中添加chunks: ['manifest', 'vendor', 'app'], ? ? ?//防止報錯webpackJsonp is not defined new HtmlWebpackPlugin({ ? ? filename: config.build.index, ? ? template: 'index.html', ? ? inject: true, ? ? minify: { ? ? ? ? removeComments: true, ? ? ? ? collapseWhitespace: true, ? ? ? ? removeAttributeQuotes: true ? ? ? ? // more options: ? ? ? // https://github.com/kangax/html-minifier#options-quick-reference ? ? }, ? ? ? // necessary to consistently work with multiple chunks via CommonsChunkPlugin ? ? ?chunks: ['manifest', 'vendor', 'app'], ? ? ? chunksSortMode: 'dependency' }), //路由中mode:'history',
//刷新首屏閃現(xiàn)問題
百度方案(測試暫無效果)
根目錄的index.html中添加display:none;
app.vue中中修改為block
//百度商橋重復(fù)加載出現(xiàn)兩次的問題
在打包后生產(chǎn)的html中刪除生成的那一份商橋代碼,放到服務(wù)器會自動生成新一份
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-quill-editor富文本編輯器超詳細入門使用步驟
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下2022-08-08Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的示例代碼
這篇文章主要詳細介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-02-02