vue 预渲染 （进行SEO优化）

优点：

• 获取服务端渲染的优点
• 对特定的路由生成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模式