vue腳手架配置預渲染及prerender-spa-plugin配置方式是什么

今天小編給大家分享一下vue腳手架配置預渲染及prerender-spa-plugin配置方式是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

腳手架配置預渲染及prerender-spa-plugin配置

預渲染： 便于seo優化；既查看源碼 是 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'),
      
      // 對應自己的所有路由文件，比如index有參數，就需要寫成 /index/param1。這個其實不需要；千萬不要加'/'這個     嵌套路由得commonquestion直接寫即可
      routes: ['index','...','/commonQuestion','/commonQuestion/questionList','/commonQuestion/questionDetailInfo'],
      //  ；
      renderer: new Renderer({
         inject: {						// 可選；最好還是用
                      foo: 'bar'
                  },
          headless: false,				// 可選；最好用
          renderAfterTime: 5000,		// 通過實踐是必選  官網說可選有誤    一定要必選
           renderAfterDocumentEvent: 'render-event'				// 可選；最好用
      })
  }),
    ]
})

2.路由得index.js添加屬性：

mode:‘history’,

修改config/index.js 中的build的 assetsPublicPath: ‘/’ ；不然會導致刷新頁面路徑錯亂導致樣式或者js丟失；

修改main.js

new Vue({
  el: '#app',
  router,
  store,				// 如果需要了切記引入啊   切記需要掛載的全部掛載上去
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

腳手架3.0 （未驗證，應該行）

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打包的一致。
                    // 下面這句話非常重要！！！
                    // 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。
                    staticDir: path.join(__dirname,'dist'),
                    // 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 這個很重要，如果沒有配置這段，也不會進行預編譯
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                          renderAfterTime: 5000,  //   必選哈
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
                        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預渲染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預渲染
       new PrerenderSPAPlugin({
   // 生成文件的路徑，也可以與webpakc打包的一致。
      staticDir: path.join(__dirname, '../dist'),
  // 對應自己的路由文件，比如index有參數，就需要寫成 /index/param1。
      routes: ['/','/about'],
  // 這個很重要，如果沒有配置這段，也不會進行預編譯
      renderer: new Renderer({
         // inject:{
           // foo:'bar'
        // },
       // 觸發渲染的時間，用于獲取數據后再保存渲染結果
       renderAfterTime: 5000,
           headless: false,
           // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
          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',

//刷新首屏閃現問題

百度方案（測試暫無效果）

根目錄的index.html中添加display：none；

app.vue中中修改為block

//百度商橋重復加載出現兩次的問題

在打包后生產的html中刪除生成的那一份商橋代碼，放到服務器會自動生成新一份

以上就是“vue腳手架配置預渲染及prerender-spa-plugin配置方式是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。