济宁网站建设公司有哪些/推广代理平台登录

优点：

• 获取服务端渲染的优点
• 对特定的路由生成HTML文件，作为一个完全静态的站点
• 无需使用服务器进行配置，方便网络爬虫进行推广网站

官网:vue-cli-plugin-prerender-spa - npm (npmjs.com)

安装指令：

npm i vue-cli-plugin-prerender-spa   //安装预渲染插件

配置：

文件配置位置：Vue.config.js

注意：配置前需要明确vue.config.js的配置方法（chainwebpack configurewebpack）

因为项目采用的是chainwebpack（链式写法，所以配置预渲染需要用链式的写法来配置）

第一步：（vue.config.js引入）

const path = require('path')const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

第二步：配置

if (process.env.NODE_ENV == "production") {    config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [        {            staticDir: path.join(__dirname, 'dist'),            routes: [                    //如果路由需要参数，写法/detail/param1                '/detail'            ],            renderer: new Renderer({                headless: false,                // 对应App.vue            }),        }])}

第三步：main.js

1.这个方法将vue.config.js配置中的renderer简化，解决配置预渲染打包过程中不动问题

mounted(){    document.dispatchEvent(new Event('custom-render-trigger'))}

2.未简化版本打包过程会卡顿

main.js：

document.dispatchEvent(new Event('render-event'))

vue.config.js

renderer: new Renderer({                headless: false,                renderAfterDocumentEvent:'render-event'                // 对应App.vue            }),

第三步：打包

npm run build

打包完成后直接在服务器中运行就好了

注意：预渲染只支持在history模式下，hash模式不会生效，需要将项目的路由改为history模式