A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 大蓝鲸小蟀锅 于 2019-5-28 17:10 编辑

        预渲染: 便于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',

        3. 修改config / index.js 中的build的 assetsPublicPath: ‘/’ ;不然会导致刷新页面路径错乱导致样式或者js丢             失;

        4. 修改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;




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马