vue 项目预渲染（prerender-spa-plugin）

Posted 2023-05-10

参考技术A vue.config.js

main.js

vue-cli3.0预渲染

1.核心插件

cnpm install prerender-spa-plugin --save-dev

2.vue-config.js中

const path = require(‘path‘);
const PrerenderSPAPlugin = require(‘prerender-spa-plugin‘);
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
        configureWebpack: config => {
        if (process.env.NODE_ENV === ‘production‘) {
            // 为生产环境修改配置...
            return {
                plugins: [
                    // 预渲染配置
                    new PrerenderSPAPlugin({
                        //要求-给的WebPack-输出应用程序的路径预渲染。
                        staticDir: path.join(__dirname, ‘dist‘),
                        //必需，要渲染的路线。
　　　　　　　　　　　　// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                        routes: [‘/‘,‘/fillIn‘],
                        //必须，要使用的实际渲染器，没有则不能预编译
                        renderer: new Renderer({
                            inject: {
                                foo: ‘bar‘
                            },
                            headless: false, //渲染时显示浏览器窗口。对调试很有用。  
                            //等待渲染，直到检测到指定元素。
                            //例如，在项目入口使用`document.dispatchEvent(new Event(‘custom-render-trigger‘))` 
                            renderAfterDocumentEvent: ‘render-event‘
                        })
                    })
                ],
            }
        } else {
            // 为开发环境修改配置...
            return;
        }
    }
}

3.在main.js中

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

4.router.js 中路由必须设置 mode: “history”模式

5.npm run build打包，生成的 dist 目录里有配置的每个路由名称对应的文件夹，里面的index.html有内容，就代表成功了。反之，请重新按步骤检查。