vue实现预渲染

vue实现预渲染要借助prerender-spa-plugin这个工具包，prerender-spa-plugin不仅仅可是实现vue单页面应用项目的预渲染，也可以实现angular、react单页面应用的预渲染。

该文档以vue-cli搭建的项目结构为例

• 第一步：安装工具包cnpm i prerender-spa-pluguin -D
• 第二步：配置webpack

找到build/webpack.pro.config.js,做如下修改

 //1-引入预渲染插件：在头部引入
  const PrerenderSPAPlugin=require('prerender-spa-plugin')
 //2-预渲染配置：在 "plugins: []"配置项中添加如下配置
  new PrerenderSPAPlugin({
      //静态html页面存放目录
      staticDir: path.join(__dirname, '../dist/html'),
      //需要预渲染的页面对应的路由地址
      routes: [ '/index','/about','/contact','/joinus'],
      // renderer: new Renderer({
      //   inject: {
      //     foo: 'bar'
      //   },
      //   headless: false,
      //   renderAfterDocumentEvent: 'render-event'
      // })
    }),

• 第三步：打包npm run build
• 第四步：查看dist文件夹，看看有没有生成对应的html文件

github在线参考文档

github在线地址