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

2023-06-30 16:30

短信预约 -IT技能 免费直播动态提醒

今天小编给大家分享一下vue脚手架配置预渲染及prerender-spa-plugin配置方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

脚手架配置预渲染及prerender-spa-plugin配置

预渲染：便于seo优化；既查看源码是 html格式

用到插件：

cnpm install prerender-spa-plugin --save

脚手架2.0：(自己的是2.0)

build/webpack.prod.conf.js 配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')const Renderer = PrerenderSPAPlugin.PuppeteerRendererconst 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'// 可选；最好用      })  }),    ]})

路由得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 （未验证，应该行）

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'                    })                }),            ],        };    }}

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 definednew 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；

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