精华内容
下载资源
问答
  • vue预渲染

    2021-07-27 01:31:08
    vue预渲染 ​ vue是一个单页面应用(spa),只有一个 html 文件(内容只有一个#app根节点),然后根据访问的 url 来匹配对应的路由脚本,动态地渲染页面内容,然而这种方式无法被爬虫和百度搜索到。如果想对某些...

    vue预渲染

    ​ vue是一个单页面应用(spa),只有一个 html 文件(内容只有一个#app根节点),通过加载js脚本来填充页面要渲染的内容,然而这种方式无法被爬虫和百度搜索到。如果想对某些页面进行SEO(搜索引擎优化)优化,可以通过预渲染实现,无需使用web服务器实时动态编译html,只需要在构建的时候简单的生成针对特定路由的 静态html文件。优点是设置预渲染更简单,并可以将你得前端作为一个完全静态的站点。

    1 安装预渲染插件

    npm install prerender-spa-plugin -D  #安装或者编译出错,npm换成cnpm
    

    2 配置vue.config.js

    const path = require('path')
    // 预渲染插件
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    module.exports = {
        configureWebpack: {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径,与webpack打包一致即可
                    staticDir: path.join(__dirname, 'dist'),
                    // 需要预渲染的路由
                    routes: ['/', '/about'],
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 这个选项很重要,在程序入口执行:document.dispatchEvent(new Event('render-event'))
                        renderAfterDocumentEvent: 'render-event',
                    })
                })
            ]
        }
    }
    

    3 修改main.js

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
        router,
        mounted() {
            document.dispatchEvent(new Event('render-event'))
        },
        render: h => h(App)
    }).$mount('#app')
    

    4 修改router.js

    const router = new VueRouter({
       // 修改路由模式为history
       mode: 'history',
       routes
    })
    

    5 构建项目

    npm run build
    

    构建成功后,dist目录下可以看到,根路径和about路径下都生成了index.html文件,当浏览器访问这两个路径(路由)时,服务器返回的就是对应html文件的内容。

    在这里插入图片描述

    6 修改页面的meta信息

    • 安装vue-meta-info插件
    npm install vue-meta-info -S  #安装时最好和prerender-spa-plugin一起安装
    
    • 修改main.js
    import MetaInfo from 'vue-meta-info'
    Vue.use(MetaInfo)
    
    • 修改vue文件
    <template>
        <div class="home">
            home page...
        </div>
    </template>
    <script>
    export default {
    // npm install vue-meta-info --save 
    // main.js 导入并Vue.use(xxx)
    // 配置title和meta数据,实现seo优化配合预渲染使用
      metaInfo: {
        title: '我是一个title',
        meta: [
          {
            name: 'keywords',
            content: '关键字1,关键字2,关键字3'
          },
          {
            name: 'description',
            content: '这是一段网页的描述'
          }
        ]
      },
    }
    </script>
    
    • 打包后生成的文件内容
    <!DOCTYPE html>
    <html lang="">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" href="/favicon.ico">
        <title>我是一个title</title>
        <link href="/js/about.9f1a3f34.js" rel="prefetch">
        <link href="/js/app.bebcb2a7.js" rel="preload" as="script">
        <link href="/js/chunk-vendors.6dae171a.js" rel="preload" as="script">
        <meta data-vue-meta-info="true" name="keywords" content="关键字1,关键字2,关键字3">
        <meta data-vue-meta-info="true" name="description" content="这是一段网页的描述">
    </head>
    
    <body>
    	<noscript>
    		<strong>We're sorry but my-prj2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    	</noscript>
        <div id="app"><a href="/" aria-current="page" class="router-link-exact-active router-link-active">首页</a> | <a href="/about" class="">关于</a>
            <div class="home"> home page... </div>
        </div>
        <script src="/js/chunk-vendors.6dae171a.js"></script>
        <script src="/js/app.bebcb2a7.js"></script>
    </body>
    
    </html>
    
    展开全文
  • Vue 预渲染

    2019-02-28 14:55:46
    Vue 预渲染 预渲染 VS SSR 预渲染 更好的 SEO 相比 SSR 非常简单,对代码的改造非常小 应用的路由比较少或者只需要优化个别路由 内容到达时间(time-to-content) 要求不是很高 SSR 服务端渲染 相对于预渲染,SSR有...

    Vue 预渲染

    预渲染 VS SSR

    预渲染

    • 更好的 SEO
    • 相比 SSR 非常简单,对代码的改造非常小
    • 应用的路由比较少或者只需要优化个别路由
    • 内容到达时间(time-to-content) 要求不是很高

    SSR 服务端渲染

    • 相对于预渲染,SSR有更快的内容到达时间(time-to-content)
    • 开发条件所限:浏览器特定的代码,只能在某些生命周期钩子函数中使用;一些外部扩展库可能需要特殊处理,才能在服务器渲染应用程序中运行
    • 涉及构建设置和部署的更多要求
    • 更多的服务器端负载
    • 在现成的代码下改造的工作量很大

    总结:例如,如果你正在构建一个内部仪表盘,初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而,内容到达时间 (time-to-content) 要求是绝对关键的指标,在这种情况下,服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

    如何实现

    • 安装插件 yarn add prerender-spa-plugin
    • 应用程序路由使用 history 模式
    • 需要保证 App.js 中的 template 的根节点有 id="app",或者你程序对应的启动 ID 名
    • 修改构建时候的配置,添加插件的相关信息
    // vue-cli 3
    // vue.config.js
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    const path = require('path')
    
    module.exports = {
      productionSourceMap: false,
      configureWebpack(config) {
        if ('production' === process.env.NODE_ENV) {
          config.plugins.push(
            new PrerenderSPAPlugin({
              staticDir: path.join(__dirname, 'dist'),
              routes: ['/', '/carRecordDetail', '/caseRecordDetail', '/personRecordDetail'],
              renderer: new Renderer({
                headless: false,
                renderAfterTime: 5000
              })
            })
          )
        }
      }
    }
    
    

    常用配置详解

    • staticDir : 预渲内容的输出地址
    • routes : 需要渲染的路由
    • server : 服务端的代理,用于发送请求
    • renderer : 渲染器
      • headless : false 情况下会打开浏览器,方便我们调试是否渲染的数据准确
      • renderAfterTime : 等待多少秒之后去开始渲染,设置合适的事件方便我们等待请求返回数据
      • renderAfterElementExists : 当存在某个元素的时候开始渲染
      • renderAfterDocumentEvent : 当初发某个事件的时候开始渲染。在合适的地方调用 document.dispatchEvent(new Event('custom-render-trigger')) 事件。需要保持事件名称和设置的名称一致
    • 更多内容

    运行原理

    在这里插入图片描述

    • 打包出内容相对于原本的信息之外,额外添加了对应路由的 index.html 文件
    • 这些文件每一个都是我们的应用程序入口
    • 相当于我们可以通过多个入口去访问我们的 SPA 程序
    • 每个入口访问的程序后续操作和反应都是一致的
    • 当我们一开始访问不同的路由时候,这时候就会加载对应的 index.html 文件,实现类似静态页面的效果
    • 当网络爬虫爬去 www.xxx.xx/aaa 页面的时候,就会加载到 aaa/index.html

    遇到的坑

    • 一定要使用 history 路由模式
    • 一定要保证 App.js 中的 template 的根节点有 id="app",或者你程序对应的启动 ID 名。因为如果没有这个 ID 渲染出来的页面根元素就没有这个 ID ,就无法启用你的 Vue 程序,这时候的页面真的就是一个静态页面了什么操作都无效
    • 安装 prerender-spa-plugin 失败,实际上是安装它的依赖 puppeteer 失败。这个插件需要下载 Chromium解决方案

    注意:prerender-spa-plugin 不仅仅只能使用在 Vue 项目。类似的 webpace 构建的应用也可以使用。例如:react Angular# Vue 预渲染

    展开全文
  • Vue预渲染

    2020-11-30 14:09:58
    SPA 全称是单页面应用(single page web application)。... 用术语“单页”就是因为...因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端,之后客户端只需要获取渲染页面或视图所需

    SPA

    全称是单页面应用(single page web application)。 一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载。 用术语“单页”就是因为页面在初始化加载后就永远不会重新加载刷新。 一些前端框架,如 Vue 就是 SPA 架构的,适合单页面开发。
    优点:
    减轻服务器端的压力
    因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端,之后客户端只需要获取渲染页面或视图所需要的数据即可。 payload就是起关键作用的资源
    提高了页面的渲染效果
    由于移动设备的流行,可以开发提供JSON格式数据的网络服务,然后可以提供不同的客户端使用。 SPA的使用,我们可以使用一个HTTP API,一个HTTP API相比在服务端渲染一个HTML页面有诸多好处,这样就可以很方便的进行单元测试等操作,还可以被其他很多客户端程序所用。
    SPA最大的好处就是大量的工作都在浏览器中完成,服务端承担更少的工作,这样就可以处理更多的请求。同时SPA需要额外的请求模版开销,我们可以通过预编译模版、缓存机制和将多个模板拼接成一个大的模板来减少请求数量。

    缺点:
    但是也带来了SEO(*对搜索引擎的配置)缺少的问题,因为只有一个页面导致SEO只能有一个,有没有什么方法使不同的页面都能有一个SEO呢?也就是使其变成多页开发。

    预渲染

    无需服务器实时动态编译,采用预渲染,在构建时针对特定路由简单的生成静态HTML文件。本质就是客户端渲染, 只不过和SPA不同的是预渲染有多个界面。
    使用预渲染解决SPA应用SEO问题:
    vue-cli-plugin-prerender-spa
    注意点: Router必须使用history模式
    (*以下代码为插件安装后自动在vue.config.js文件中生成的配置)

    pluginOptions: {
        prerenderSpa: {
          registry: undefined,
          renderRoutes: [
            '/''' // 此为你所要进行预渲染的界面(组件),可以是多个
          ],
          useRenderEvent: true,
          headless: true,
          onlyProduction: true
        }
      }
    

    此插件根据组件信息提前模拟浏览器进行index的创建,所以会与自己对浏览器配置的信息不同,需要手动配置。
    (通过正则表达式的匹配和对DOM的操纵,想要在node环境下控制DOM元素借助jsdom插件即可)
    经过创建的多个页面的预渲染,SEO数量根据不同页面的创建而增多,解决SPA只有一个SEO的问题。

    展开全文
  • VUE预渲染

    千次阅读 2018-02-08 15:14:50
    npm install -D prerender-spa-plugin 修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。 var PrerenderSpaPlugin = require('prerender-spa-plugin') ... //将渲染的文件放到dist目录下 ...

    npm install -D prerender-spa-plugin

    修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。

    var PrerenderSpaPlugin = require('prerender-spa-plugin')
    new PrerenderSpaPlugin(
        //将渲染的文件放到dist目录下
          path.join(__dirname, '../dist'),   
          //需要预渲染的路由信息
          [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
          {
          //在一定时间后再捕获页面信息,使得页面数据信息加载完成
            captureAfterTime: 50000,
            //忽略打包错误
            ignoreJSErrors: true,
            phantomOptions: '--web-security=false',
            maxAttempts: 10,
          }
        ),
    展开全文
  • VUE预渲染及遇到的坑

    2020-10-18 02:29:37
    主要介绍了VUE预渲染及遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 搜索热词本文介绍了VUE预渲染及遇到的坑,分享给大家,具体如下:修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。new PrerenderSpaPlugin(//将渲染的文件放到dist目录下path.join(__dirname,'../...
  • vue预渲染打包遇到 Chromium revision is not downloaded 报错 vue预渲染 打包 遇到这个报错 无奈 含泪整理这个报错问题 , 废话不多说直接上图 解决方法 : 第一步 : 先删除 node_modules 文件夹. 第二步 : 执行命令...
  • vue预渲染 render-spa-plugin 全局安装 npm install -g @vue/cli-init 创建vebpack项目 vue init webpack . // 在当前文件夹下创建项目 ? Generate project in current directory? Yes ? Project name ...
  • Vue SSR服务端渲染 vue预渲染

    千次阅读 2020-05-17 18:04:22
    了解SSR之前,需要知道最原始的服务器渲染、前后端一起开发。使用用一个服务器。原始的服务器渲染是整个web项目放入后端,提供路由访问。好处坏处也很多,举例:MVC模式。JavaWeb 原始服务渲染 优点: 安全性:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,922
精华内容 4,368
关键字:

vue预渲染

vue 订阅