• 技术文章 >web前端 >Vue.js

    node和laravel项目中预渲染vue.js应用程序

    青灯夜游青灯夜游2020-09-27 14:04:25转载239

    服务器端渲染现在非常流行。但它也并非没有缺点。预渲染是一种替代方法,在某些情况下甚至可能更好。下面我们来看一下如何预渲染vue.js应用程序。

    在本文中,我们将探讨预渲染如何与vue.js一起工作,并看两个示例:一个是node.js项目,一个是laravel项目。

    相关教程推荐:node js教程vue.js教程laravel教程

    一、服务端渲染

    基于javascript的应用程序的一个缺点是,浏览器从服务器接收到的页面基本上是空的。在下载并运行Javascript之前,无法构建DOM。

    这意味着用户必须等待更长的时间才能看到任何东西。如果爬虫程序不能快速查看页面内容,它也会对SEO产生影响。

    服务器端呈现(SSR)通过在服务器上呈现应用程序来克服这个问题,以便客户端在加载页面时(甚至在Javascript运行之前)接收完整的DOM内容。

    而不是浏览器从服务器接收这个:

    <head> ... </head>
    <body>
    <div id="app">
      <!--This is empty, Javascript will populate it later-->
    </app>
    </body>

    使用SSR,它接收一个完整的内容页面:

    <head> ... </head>
    <body>
    <div id="app">
      <div class="container">
        <h1>Your Server-Side Rendered App</h1>
        <div class="component-1">
          <p>Hello World</p>
          <!--etc etc. This was all rendered on the server-->
    </app>
    </body>

    服务器端渲染缺点

    二、预渲染

    还有另一种方法可以解决空页问题:预渲染。使用这种方法,您可以在部署应用程序之前运行应用程序,捕获页面输出并用捕获的输出替换HTML文件。

    它与SSR的概念基本相同,只是它是在开发环境中预先部署的,而不是在活动服务器中。

    预渲染通常使用PhantomJS这样的无头浏览器来执行,并且可以与Webpack、Gulp等一起集成到构建流中。

    预渲染的优点

    预渲染的缺点

    对照表


    仅客户端渲染服务端渲染预渲染
    生产服务器Any/noneNode.js onlyAny/none
    额外的服务器负载NoYesNo
    个性化用户数据?N/AYesNo

    三、Vue.js预渲染示例

    让我们做一个简单的例子来预渲染一个vue.js应用程序,一次在node.js环境中,一次在laravel环境中。

    在这些示例中,我们将使用webpack和pre render spa插件来执行预渲染。

    1、Vue和Node

    第1步:项目安装

    我们将使用vue-cli和webpack-simple模板。

    $ vue init webpack-simple vue-node-pr-test
    $ cd vue-node-pr-test
    $ npm install

    我们还需要另外三个模块,后面还有解释。

    $ npm install --save-dev http-server html-webpack-plugin prerender-spa-plugin

    第2步:在Webpack构建中包含index.html

    Webpack -simple模板在Webpack构建输出中不包含index.html文件。然而,当我们预渲染应用程序时,我们需要覆盖我们的索引。因此,让我们将它添加到输出中,以免破坏原始的。

    在我们的Webpack .config.js文件中使用html-webpack-plugin将文件包含在Webpack构建中:

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports.plugins.push(
      new HtmlWebpackPlugin({
        template: './index.html',
        inject: false
      }),
    );

    现在我们改变了我们的Webpack公共路径,因为index.html现在和其他静态资产在同一个文件夹中:

    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'build.js',
      publicPath: '/', // was originally 'dist'
    },

    由于路径的变化,我们还需要将index.html中的<script src="/dist/build.js"></script>更改为<script src=“/build.js”></script>。

    第3步:测试Webpack生成版本

    现在我们建造:

    $ npm run build

    我们的dist文件夹应该是这样的:

    - dist
    -- build.js
    -- index.html
    -- logo.png

    如果我们检查dist/index.html,它会是这样的:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>vue-node-pr-test</title>
      </head>
      <body>
        <div id="app"></div>
        <script type="text/javascript" src="/build.js"></script>
      </body>
    </html>

    现在我们可以使用http-server并从dist文件夹中提供应用程序。默认情况下,它将运行在localhost:8080:

    $ ./node_modules/.bin/http-server ./dist

    第4步:预渲染应用程序

    现在我们的index.html文件在Webpack构建中,我们可以使用预呈现的HTML更新它。

    首先,我们需要在webpack配置中添加prerender-spa-plugin。确保它在html-webpack-plugin之后。

    var PrerenderSpaPlugin = require('prerender-spa-plugin');
    
    module.exports.plugins.push(
      new PrerenderSpaPlugin(
        path.join(__dirname, './dist'),
        [ '/' ]
      )
    );

    PrerenderSpaPlugin的第一个参数是index.html文件的位置,第二个参数是应用程序中的路由列表。在这个例子中,我们只有一条路径。

    现在我们再次建造:

    $ npm run build

    我们的构建将比以前花费更长的时间,因为预渲染插件正在做的事情:

    1. 它创建一个Phantom JS实例并运行应用程序

    2. 获取DOM的快照

    3. 将快照输出到生成文件夹中的HTML文件

    它会对每条路径重复这个过程,所以如果你有很多页面,构建应用程序可能需要相当长的时间。

    在建立后,我们的dist/index.html现在应该包括所有预渲染的HTML:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>prerender-test</title>
      <style type="text/css">#app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px
      }
    
      h1, h2 {
        font-weight: 400
      }
    
      ul {
        list-style-type: none;
        padding: 0
      }
    
      li {
        display: inline-block;
        margin: 0 10px
      }
    
      a {
        color: #42b983
      }</style>
    </head>
    <body>
    <div id="app"><img src="/logo.png?82b9c7a5a3f405032b1db71a25f67021">
      <h1></h1>
      <h2>Essential Links</h2>
      <ul>
        <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
        <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
        <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
        <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      </ul>
      <h2>Ecosystem</h2>
      <ul>
        <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
        <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
        <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
        <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
      </ul>
    </div>
    <script type="text/javascript" src="/build.js"></script>
    
    </body>
    </html>

    2、Vue 和 Laravel

    如果您跳过了Vue和Node示例,我建议您先回去阅读它,因为它包含了对任何常见步骤的更全面的解释。

    第1步:项目安装

    首先,我们将设置一个新的Laravel项目。

    $ laravel new vue-laravel-pr-test
    $ cd vue-laravel-pr-test
    $ npm install

    我们还将增加两个我们需要的NPM模块:

    $ npm install --save-dev html-webpack-plugin prerender-spa-plugin

    第2步:提供一个普通的HTML文件

    默认情况下,Laravel在根URL处提供Blade模板文件。 为了使示例简单,我们将使用我们将在resources / views / index.html创建的以下纯HTML文件替换它

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Laravel</title>
        <link rel="stylesheet" href="/css/app.css">
    <body>
    <div id="app">
      <example></example>
    </div>
    <script type="text/javascript" src="/js/app.js"></script>
    </body>
    </html>

    现在,我们需要在根路径上提供该文件,而不是刀片服务器模板。将route /web.php更改为:

    Route::get('/', function () {
      return File::get(public_path() . '/index.html');
    });

    这实际上指向我们的build文件夹,我们很快就会生成它。

    第3步:将HTML文件添加到构建中

    像在节点示例中一样,我们希望在Webpack构建中包含index.html,以便稍后使用预呈现的HTML覆盖它。

    我们需要做一些Webpack配置。在本例中,我使用的是Laravel 5.4,它使用的是Laravel Mix。Mix没有提供本地webpack配置文件,因为它使用自己的默认文件,所以让我们从laravel-mix模块复制一个配置文件:

    $ cp ./node_modules/laravel-mix/setup/webpack.config.js .

    我们还需要让我们的NPM生产脚本指向这个配置文件,因此编辑包。json,并将生产脚本更改为:

    cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js 
    --progress --hide-modules --config=webpack.config.js

    现在我们将html-webpack-plugin添加到webpack.config.js文件中。把这个添加到文件的底部上面的混合定型部分:

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports.plugins.push(
      new HtmlWebpackPlugin({
        template: Mix.Paths.root('resources/views/index.html'),
        inject: false
      });
    );

    第4步:测试Weback生成版本

    现在让我们为生产和服务:

    $ npm run production
    $ php artisan serve

    不过,在运行应用程序时,浏览器中可能会出现错误,因为我们从未为window.Laravel.csrfToken设置值。对于这个简单的例子,注释掉会更快,所以像这样修改resources/assets/js/bootsta .js:

    window.axios.defaults.headers.common = {
      'X-Requested-With': 'XMLHttpRequest'
      // 'X-CSRF-TOKEN': window.Laravel.csrfToken;
    };

    第5步:预渲染应用程序

    我们现在需要在webpack配置中使用prerender spa插件来执行预渲染。确保它在HTML网页包插件之后。

    var PrerenderSpaPlugin = require('prerender-spa-plugin');
    
    module.exports.plugins.push(
      new PrerenderSpaPlugin(
        Mix.output().path,
        [ '/' ]
      )
    );

    现在我们可以做一个生产构建:

    $ npm run production

    如果您选中build文件夹,dist/index.html现在应该如下所示,并使用预渲染HTML完成:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Laravel</title>
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
    <div id="app">
        <div>
            <div>
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div>Example Component</div>
                        <div>
                            I'm an example component!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/app.js"></script>
    </body>
    </html>

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程入门!!

    以上就是node和laravel项目中预渲染vue.js应用程序的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:vuejsdevelopers,如有侵犯,请联系a@php.cn删除
    专题推荐:node laravel vue.js
    上一篇:Vue应用程序中实现AJAX的四个地方 下一篇:15个Vue.js高级面试问题
    第14期线上培训班

    相关文章推荐

    • 如何在Laravel中使用Redis锁解决缓存击穿问题• 教你安装更新 Laravel 安装器• 使用 Composer 安装 Laravel 安装器• 通过Node+Redi实现API速率限制• 深入研究Node.js中的异步生成器和异步迭代• Vue.js中定义组件模板的几种方法介绍• Vue应用程序中实现AJAX的四个地方• 浅谈Node.js中require()的工作原理

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网