ノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーション-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

ノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーション

青灯夜游

Sep 27, 2020 pm 02:04 PM

laravelnodevue.js

ノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーション

サーバーサイドレンダリングは現在非常に人気があります。しかし、欠点がないわけではありません。プリレンダリングは代替手段であり、場合によってはその方が良い場合もあります。 vue.js アプリケーションをプリレンダリングする方法を見てみましょう。

この記事では、vue.js でプリレンダリングがどのように機能するかを調査し、2 つの例を見ていきます。1 つは node.js プロジェクト、もう 1 つは laravel プロジェクトです。

推奨される関連チュートリアル: node js チュートリアル、vue.js チュートリアル、laravel チュートリアル

##1. サーバー側レンダリング

JavaScript ベースのアプリケーションの欠点の 1 つは、ブラウザーがサーバーから受け取るページが基本的に空であることです。 DOM は、JavaScript がダウンロードされて実行されるまで構築できません。

これは、ユーザーが何も表示されるまでに長く待たなければならないことを意味します。また、クローラーがページのコンテンツをすぐに表示できない場合、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 id="Your-nbsp-Server-Side-nbsp-Rendered-nbsp-App">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>

サーバー側レンダリングの欠点

アプリケーションはサーバー上で実行可能である必要があるため、コードを「ユニバーサル」になるように設計する必要があります。つまり、コードを参照できるようにする必要があります。サーバーとノードサーバー。
アプリケーションはサーバーへのすべてのリクエストで実行されるため、従来のような負荷がかかり、応答が遅くなります。キャッシュを使用すると、この状況を部分的に軽減できます。
SSR は Node.js でのみ実行できます。メインバックエンドが Laravel、Django などの場合、SSR を処理するためにメインバックエンドでノードサーバーを実行する必要があります。

2. プリレンダリング

もう 1 つあります。空のページの問題を解決する 1 つの方法は、プリレンダリングです。このアプローチを使用すると、アプリケーションをデプロイする前に実行し、ページ出力をキャプチャして、HTML ファイルをキャプチャされた出力で置き換えます。

これは基本的に SSR と同じ概念ですが、ライブサーバーではなく開発環境に事前にデプロイされる点が異なります。

プリレンダリングは通常、PhantomJS などのヘッドレスブラウザを使用して実行され、Webpack、Gulp などを使用してビルドフローに統合できます。

プリレンダリングの利点

追加のサーバー負荷がないため、 SSR よりも高速かつ安価です
実稼働環境のセットアップとアプリケーションコードが単純であるため、エラーが発生しにくくなります
Node.js 運用サーバーは必要ありません

プリレンダリングの欠点

#データ (表など) の変化を表示するページには適していません。
#ユーザーの個人情報を含むアカウントページなど、特定のユーザーコンテンツを含むページには適用されません。ただし、これらのタイプのページは、事前レンダリングがそれほど重要ではありません。これらは、メインで頻繁に使用されるページであり、迅速に提供したいと考えています。
#アプリケーションで各ルートを個別に事前レンダリングする必要があります。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃チャート＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃#クライアント側レンダリングのみサーバー側レンダリング本番サーバー追加サーバー負荷ユーザーデータをパーソナライズしますか?
三、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中的更改为。
第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="/static/imghwm/default1.png"  data-src="/logo.png?82b9c7a5a3f405032b1db71a25f67021"  class="lazy"   alt="ノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーション" >
  <h1></h1>
  <h2 id="Essential-nbsp-Links">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 id="Ecosystem">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视频教程精选

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

#プレレンダリング
任意/なし Node.js のみ任意/なし
No Yes No
N/A はいいいえ

		#プレレンダリング
任意/なし	Node.js のみ	任意/なし
No	Yes	No
N/A	はい	いいえ

以上がノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はvuejsdevelopersで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

node、nvm与npm有什么区别Jul 04, 2022 pm 04:24 PM

node、nvm与npm的区别：1、nodejs是项目开发时所需要的代码库，nvm是nodejs版本管理工具，npm是nodejs包管理工具；2、nodejs能够使得javascript能够脱离浏览器运行，nvm能够管理nodejs和npm的版本，npm能够管理nodejs的第三方插件。

Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PM

Vercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！

node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！

node导出模块有哪两种方式Apr 22, 2022 pm 02:57 PM

node导出模块的两种方式：1、利用exports，该方法可以通过添加属性的方式导出，并且可以导出多个成员；2、利用“module.exports”，该方法可以直接通过为“module.exports”赋值的方式导出模块，只能导出单个成员。

安装node时会自动安装npm吗Apr 27, 2022 pm 03:51 PM

安装node时会自动安装npm；npm是nodejs平台默认的包管理工具，新版本的nodejs已经集成了npm，所以npm会随同nodejs一起安装，安装完成后可以利用“npm -v”命令查看是否安装成功。

聊聊V8的内存管理与垃圾回收算法Apr 27, 2022 pm 08:44 PM

本篇文章带大家了解一下V8引擎的内存管理与垃圾回收算法，希望对大家有所帮助！

node中是否包含dom和bomJul 06, 2022 am 10:19 AM

node中没有包含dom和bom；bom是指浏览器对象模型，bom是指文档对象模型，而node中采用ecmascript进行编码，并且没有浏览器也没有文档，是JavaScript运行在后端的环境平台，因此node中没有包含dom和bom。

聊聊Node.js path模块中的常用工具函数Jun 08, 2022 pm 05:37 PM

本篇文章带大家聊聊Node.js中的path模块，介绍一下path的常见使用场景、执行机制，以及常用工具函数，希望对大家有所帮助！

See all articles

ホットAIツール

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ドリームウィーバー CS6

ビジュアル Web 開発ツール

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。