简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Vorgerenderte vue.js-Anwendung in Node- und Laravel-Projekten

Vorgerenderte vue.js-Anwendung in Node- und Laravel-Projekten

青灯夜游
青灯夜游nach vorne
2020-09-27 14:04:252526Durchsuche

Vorgerenderte vue.js-Anwendung in Node- und Laravel-Projekten

Serverseitiges Rendering ist derzeit sehr beliebt. Aber es ist nicht ohne Mängel. Pre-Rendering ist eine Alternative und kann in manchen Fällen sogar besser sein. Schauen wir uns an, wie man eine vue.js-Anwendung vorab rendert.

In diesem Artikel werden wir untersuchen, wie Prerendering mit vue.js funktioniert, und uns zwei Beispiele ansehen: eines für ein node.js-Projekt und eines für ein Laravel-Projekt.

Empfohlene verwandte Tutorials: node js-Tutorial, vue.js-Tutorial, Laravel-Tutorial

1. Serverseitiges Rendering

Ein Nachteil von Javascript-basierten Anwendungen ist der Browser Die vom Server empfangene Seite ist grundsätzlich leer. Das DOM kann erst erstellt werden, wenn das Javascript heruntergeladen und ausgeführt wird.

Das bedeutet, dass Benutzer länger warten müssen, bevor sie etwas sehen. Es kann auch Auswirkungen auf die Suchmaschinenoptimierung haben, wenn der Crawler den Seiteninhalt nicht schnell erkennen kann.

Server Side Rendering (SSR) überwindet dieses Problem, indem es die Anwendung auf dem Server rendert, sodass der Client beim Laden der Seite (noch bevor das Javascript ausgeführt wird) den vollständigen DOM-Inhalt erhält.

Anstatt dass der Browser dies vom Server empfängt:

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

Verwenden Sie SSR, das eine vollständige Inhaltsseite empfängt:

<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>

Serverseitige Rendering-Nachteile

  • Ihre Anwendung muss auf dem Server ausführbar sein. Daher müssen Sie Ihren Code so gestalten, dass er „universell“ ist, d. h. er funktioniert über Browser und Knotenserver hinweg.

  • Ihre Anwendung wird bei jeder Anfrage an den Server ausgeführt, was zu einer herkömmlichen Belastung und langsamen Reaktion führt. Caching kann diese Situation teilweise entschärfen.

  • Sie können SSR nur mit Node.js durchführen. Wenn Ihr Haupt-Backend Laravel, Django usw. ist, müssen Sie einen Knotenserver auf dem Haupt-Backend ausführen, um SSR zu verarbeiten.

2. Vorrendering

Es gibt eine andere Möglichkeit, das Problem leerer Seiten zu lösen: Vorrendering. Bei diesem Ansatz führen Sie die Anwendung aus, bevor Sie sie bereitstellen, erfassen die Seitenausgabe und ersetzen die HTML-Datei durch die erfasste Ausgabe.

Es ist im Grunde das gleiche Konzept wie SSR, außer dass es vorab in einer Entwicklungsumgebung und nicht auf einem Live-Server bereitgestellt wird.

Pre-Rendering wird normalerweise mit einem Headless-Browser wie PhantomJS durchgeführt und kann mit Webpack, Gulp usw. in den Build-Flow integriert werden.

Vorteile des Pre-Renderings

  • Keine zusätzliche Serverlast, also schneller und günstiger als SSR

  • Einfachere Produktionseinrichtung und einfachere Anwendungen Verfahrenscode und daher weniger anfällig zu Fehlern

  • Kein Node.js-Produktionsserver erforderlich

Nachteile des Pre-Renderings

  • Für Seiten, die sich ändernde Daten anzeigen (z. B. Tabelle), nicht Es funktioniert nicht sehr gut.

  • Gilt nicht für Seiten mit spezifischen Benutzerinhalten, wie z. B. Kontoseiten, die persönliche Benutzerinformationen enthalten. Es ist jedoch ohnehin nicht so wichtig, diese Seitentypen vorab zu rendern. Dies sind unsere wichtigsten, häufig genutzten Seiten, die wir schnell bereitstellen möchten.

  • Sie müssen jede Route einzeln in der App vorab rendern.

Vergleichstabelle


 Nur Client-Rendering Server-Rendering Vor-Rendering
Produktionsserver Alle/keine Nur Node.js. Alle/keine
Zusätzliche Serverlast Nein Ja Nein
Personalisierte Benutzerdaten? N/A Ja Nein

三、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(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: &#39;./index.html&#39;,
    inject: false
  }),
);

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

output: {
  path: path.resolve(__dirname, &#39;./dist&#39;),
  filename: &#39;build.js&#39;,
  publicPath: &#39;/&#39;, // was originally &#39;dist&#39;
},

由于路径的变化，我们还需要将index.html中的cb21fb7e4d5e2fbcc4c3e1e91588031f2cacc6d41bbb37262a98f745aa00fbf0更改为aad0d9c45216e818a39fb4405cc912dc2cacc6d41bbb37262a98f745aa00fbf0。

第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(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    path.join(__dirname, &#39;./dist&#39;),
    [ &#39;/&#39; ]
  )
);

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(&#39;/&#39;, function () {
  return File::get(public_path() . &#39;/index.html&#39;);
});

这实际上指向我们的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(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: Mix.Paths.root(&#39;resources/views/index.html&#39;),
    inject: false
  });
);

第4步：测试Weback生成版本

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

$ npm run production
$ php artisan serve

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

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

第5步：预渲染应用程序

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

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    Mix.output().path,
    [ &#39;/&#39; ]
  )
);

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

$ 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&#39;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视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonVorgerenderte vue.js-Anwendung in Node- und Laravel-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript laravel django node.js json gulp vue.js html npm webpack JS dom http SEO
Stellungnahme：
Dieser Artikel ist reproduziert unter:vuejsdevelopers.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Vier Orte zur Implementierung von AJAX in Vue-AnwendungenNächster Artikel：Vier Orte zur Implementierung von AJAX in Vue-Anwendungen

In Verbindung stehende Artikel

Mehr sehen