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中删除生成的那一份商桥代码，放到服务器会自动生成新一份

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。