• vue-cli3使用prerender-spa-plugin预渲染


    1.安装

    npm install prerender-spa-plugin --save

    2.根目录新建vue.config.js

    3.vue.config.js

    const PrerenderSPAPlugin = require('prerender-spa-plugin');
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
    
    const path = require('path');
    
    // vue.config.js
    
    module.exports = {
    
        configureWebpack: config => {
    
            if (process.env.NODE_ENV !== 'production') return;
    
            return {
    
                plugins: [
    
                    new PrerenderSPAPlugin({
                        
                        staticDir: path.join(__dirname, 'dist'),
                       
                        routes: ['/', '/Second', '/Detail'],
                        
                        renderer: new Renderer({
    
                            inject: {
    
                                foo: "bar"
    
                            },
                            headless: false,
    
                            renderAfterDocumentEvent: 'render-event'
    
                        })
    
                    })
    
                ]
    
            }
    
        }
    
    }

    4.main.js

    new Vue({
        router,
        store,
        render: h => h(App),
        mounted() {
            document.dispatchEvent(new Event('render-event'))
        },
    }).$mount('#app')

    5.router.js

    const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
    })

    6.运行npm run build

     会有每个路由对应的文件夹,配置成功。

  • 相关阅读:
    法正(17):玄德
    法正(16):舌战
    法正(15):卢氏
    法正(14):寿星
    struts2笔记---struts2的执行过程
    Oracle数据库(一)
    flask的使用(一)
    struts2--笔记(一)
    docker基础(二)
    docker安装及问题处理
  • 原文地址:https://www.cnblogs.com/zax0927/p/13876844.html
Copyright © 2020-2023  润新知