vue预渲染

服务端渲染VS预渲染
  服务端渲染:将完整的 html 输出到客户端,又被认为是‘同构’或‘通用’
        优点:首次渲染快(无需等待所有js都完成下载);
           利于SEO,节能
        缺点:开发受限
           需要处于Node.js server运行环境;
           更多的服务器负载(占用更大的CPU资源)
  预渲染:  获得服务端渲染的优点
        对特定路由生成静态HTML文件,前端作为一个完全静态的站点
        无需使用web服务器实时动态编译HTML
        改善少数页面的SEO,可采用预渲染
        若网站有成百上千条路线,预编译会非常缓慢(此情况慎用)

预渲染核心:prerender-spa-plugin
安装:   cnpm install prerender-spa-plugin --save-dev

build/webpack.prod.conf.js中进行配置
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// plugins插件里书写
plugins: [
   new PrerenderSPAPlugin({
      // 生成文件的路径,这个目录只能有一级。若目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动
      staticDir: path.join(__dirname, '../dist'),
      // 对应自己的路由文件
      routes: [ '/', '/moviesDetail'],
      // 若没有这段则不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
      })
    }),
]
main.js中进行配置
new Vue({
  el: '#app',
  router,
  store,
  //   components: { App },
  //   template: '<App/>'
  render:h=>h(App),
  mounted(){
      document.dispatchEvent(new Event('render-event'))
  }
})
cnpm run build打包运行生成的目录如下,则证明此次操作成功
image.png

注:预渲染方式下的route需采用history模式,否则每个打包生成的index.html的文件内容会一样

export default new Router({
    mode: 'history',
    routes: [
        //...
    ]
})

vue-meta-info插件,网页meta标签
安装: cnpm install vue-meta-info --save-dev

main.js中进行配置
import MetaInfo from 'vue-meta-info' 
Vue.use(MetaInfo)
在xxx.vue文件里配置
export default {
    // 这些代码会转成网页的meta标签里的内容
    metaInfo: {
        title: '标题',
        meta: [
            {
                name: 'keywords',
                content: '关键字'
            },
            {
                name: 'description',
                content: '网页描述'
            }
        ]
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。