# vue-prerender

**Repository Path**: xushan12/vue-prerender

## Basic Information

- **Project Name**: vue-prerender
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-02
- **Last Updated**: 2021-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 第一步： 安装
npm install prerender-spa-plugin -D


## 第二步：webpack打包配置
    const path = require('path'); //引入path模块

    const PrerenderSPAPlugin = require('prerender-spa-plugin');   //预渲染插件
 
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;  // 预渲染器

    plugins: [

        new PrerenderSPAPlugin({

        staticDir: path.join(__dirname, '../dist'),  // 预渲染文件dist所在目录

        routes: ['/', '/about'],   // 需要预渲染的页面

        renderer: new Renderer({   // 预渲染器，必须有

          inject: {  //固定写法

            foo: 'bar'

          },

          renderAfterDocumentEvent: 'custom-render-trigger',  // 生成事件名

        })
        
      })
    ]


## 第三步：main.js文件挂载

    new Vue({

      router,

      store,

      render: h => h(App),

      mounted(){
        document.dispatchEvent(new Event('custom-render-trigger'))  // 预渲染，事件名和vue.config.js一样
      }

    }).$mount('#app');


## 第四步：在router文件的index.js 将路由的模式修改为 history模式

    const router = new VueRouter({

      routes,

      mode: 'history'

    });


## 第五步：打包，服务器端运行
   
> npm run build

下载express，服务器内容如node内server.js文件

> node server.js


或者pm2托管服务器

> npm i pm2 -g   // 全局下载pm2

> cd node  // 进入node目录

> pm2 start ./server.js  --name  自定义名称 

> pm2 ls

直接访问服务器接口



## 如果报错缺少puppeteer

全局下载puppeteer

局部下载puppeteer

删除node_modules

init下载node_modules

如果还不可以，手动在node_modules/puppeteer/lib/Launcher.js文件内，将executablePath路径改为谷歌绝对路径，斜杠改正


## 效果
如果顺利，打包文件指定预渲染页面会生成index.html，而且里面有预渲染好的标签，可以从预渲染页面直接访问，爬虫可获取标签