node和laravel項目中預(yù)渲染vue.js應(yīng)用程序

服務(wù)器端渲染現(xiàn)在非常流行。但它也并非沒有缺點。預(yù)渲染是一種替代方法，在某些情況下甚至可能更好。下面我們來看一下如何預(yù)渲染vue.js應(yīng)用程序。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供安徽網(wǎng)站建設(shè)、安徽做網(wǎng)站、安徽網(wǎng)站設(shè)計、安徽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、安徽企業(yè)網(wǎng)站模板建站服務(wù)，十載安徽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

在本文中，我們將探討預(yù)渲染如何與vue.js一起工作，并看兩個示例：一個是node.js項目，一個是laravel項目。

相關(guān)教程推薦：node js教程、vue.js教程、laravel教程

一、服務(wù)端渲染

基于javascript的應(yīng)用程序的一個缺點是，瀏覽器從服務(wù)器接收到的頁面基本上是空的。在下載并運行Javascript之前，無法構(gòu)建DOM。

這意味著用戶必須等待更長的時間才能看到任何東西。如果爬蟲程序不能快速查看頁面內(nèi)容，它也會對SEO產(chǎn)生影響。

服務(wù)器端呈現(xiàn)(SSR)通過在服務(wù)器上呈現(xiàn)應(yīng)用程序來克服這個問題，以便客戶端在加載頁面時(甚至在Javascript運行之前)接收完整的DOM內(nèi)容。

而不是瀏覽器從服務(wù)器接收這個:

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

使用SSR，它接收一個完整的內(nèi)容頁面:

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

服務(wù)器端渲染缺點

你的應(yīng)用程序需要在服務(wù)器上可執(zhí)行，所以你需要設(shè)計你的代碼是“通用的”，也就是說，它可以在瀏覽器和節(jié)點服務(wù)器上工作。

您的應(yīng)用程序?qū)⑦\行在每一個請求到服務(wù)器，添加一個傳統(tǒng)的負載和緩慢的響應(yīng)。緩存可以部分緩解這種情況。

你只能用Node.js做SSR。如果您的主后端是Laravel、Django等，那么您必須在主后端運行一個節(jié)點服務(wù)器來處理SSR。

二、預(yù)渲染

還有另一種方法可以解決空頁問題:預(yù)渲染。使用這種方法，您可以在部署應(yīng)用程序之前運行應(yīng)用程序，捕獲頁面輸出并用捕獲的輸出替換HTML文件。

它與SSR的概念基本相同，只是它是在開發(fā)環(huán)境中預(yù)先部署的，而不是在活動服務(wù)器中。

預(yù)渲染通常使用PhantomJS這樣的無頭瀏覽器來執(zhí)行，并且可以與Webpack、Gulp等一起集成到構(gòu)建流中。

預(yù)渲染的優(yōu)點

沒有額外的服務(wù)器負載，因此比SSR更快更便宜

更簡單的生產(chǎn)設(shè)置和更簡單的應(yīng)用程序代碼，因此更不容易出錯

不需要Node.js生產(chǎn)服務(wù)器

預(yù)渲染的缺點

對于顯示不斷變化的數(shù)據(jù)的頁面(例如表)，不能很好地工作。

不適用于具有特定用戶內(nèi)容的頁面，例如包含用戶個人信息的帳戶頁面。然而，無論如何，這些類型的頁面對于預(yù)呈現(xiàn)都不那么重要;這是我們主要的，經(jīng)常使用的頁面，我們想要提供快速。

你需要在應(yīng)用程序中單獨預(yù)渲染每條路線。

對照表

僅客戶端渲染服務(wù)端渲染預(yù)渲染生產(chǎn)服務(wù)器Any/noneNode.js onlyAny/none額外的服務(wù)器負載NoYesNo個性化用戶數(shù)據(jù)？N/AYesNo

三、Vue.js預(yù)渲染示例

讓我們做一個簡單的例子來預(yù)渲染一個vue.js應(yīng)用程序，一次在node.js環(huán)境中，一次在laravel環(huán)境中。

在這些示例中，我們將使用webpack和pre render spa插件來執(zhí)行預(yù)渲染。

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構(gòu)建中包含index.html

Webpack -simple模板在Webpack構(gòu)建輸出中不包含index.html文件。然而，當(dāng)我們預(yù)渲染應(yīng)用程序時，我們需要覆蓋我們的索引。因此，讓我們將它添加到輸出中，以免破壞原始的。

在我們的Webpack .config.js文件中使用html-webpack-plugin將文件包含在Webpack構(gòu)建中:

var HtmlWebpackPlugin = require('html-webpack-plugin');

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

現(xiàn)在我們改變了我們的Webpack公共路徑，因為index.html現(xiàn)在和其他靜態(tài)資產(chǎn)在同一個文件夾中:

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生成版本

現(xiàn)在我們建造:

$ npm run build

我們的dist文件夾應(yīng)該是這樣的:

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

現(xiàn)在我們可以使用http-server并從dist文件夾中提供應(yīng)用程序。默認情況下，它將運行在localhost:8080:

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

第4步：預(yù)渲染應(yīng)用程序

現(xiàn)在我們的index.html文件在Webpack構(gòu)建中，我們可以使用預(yù)呈現(xiàn)的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的第一個參數(shù)是index.html文件的位置，第二個參數(shù)是應(yīng)用程序中的路由列表。在這個例子中，我們只有一條路徑。

現(xiàn)在我們再次建造：

$ npm run build

我們的構(gòu)建將比以前花費更長的時間，因為預(yù)渲染插件正在做的事情:

它創(chuàng)建一個Phantom JS實例并運行應(yīng)用程序

獲取DOM的快照

將快照輸出到生成文件夾中的HTML文件

它會對每條路徑重復(fù)這個過程，所以如果你有很多頁面，構(gòu)建應(yīng)用程序可能需要相當(dāng)長的時間。

在建立后，我們的dist/index.html現(xiàn)在應(yīng)該包括所有預(yù)渲染的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步：項目安裝

首先，我們將設(shè)置一個新的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創(chuàng)建的以下純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>

現(xiàn)在，我們需要在根路徑上提供該文件，而不是刀片服務(wù)器模板。將route /web.php更改為:

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

這實際上指向我們的build文件夾，我們很快就會生成它。

第3步：將HTML文件添加到構(gòu)建中

像在節(jié)點示例中一樣，我們希望在Webpack構(gòu)建中包含index.html，以便稍后使用預(yù)呈現(xiàn)的HTML覆蓋它。

我們需要做一些Webpack配置。在本例中，我使用的是Laravel 5.4，它使用的是Laravel Mix。Mix沒有提供本地webpack配置文件，因為它使用自己的默認文件，所以讓我們從laravel-mix模塊復(fù)制一個配置文件:

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

我們還需要讓我們的NPM生產(chǎn)腳本指向這個配置文件，因此編輯包。json，并將生產(chǎn)腳本更改為:

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

現(xiàn)在我們將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生成版本

現(xiàn)在讓我們?yōu)樯a(chǎn)和服務(wù):

$ npm run production
$ php artisan serve

不過，在運行應(yīng)用程序時，瀏覽器中可能會出現(xiàn)錯誤，因為我們從未為window.Laravel.csrfToken設(shè)置值。對于這個簡單的例子，注釋掉會更快，所以像這樣修改resources/assets/js/bootsta .js:

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

第5步：預(yù)渲染應(yīng)用程序

我們現(xiàn)在需要在webpack配置中使用prerender spa插件來執(zhí)行預(yù)渲染。確保它在HTML網(wǎng)頁包插件之后。

var PrerenderSpaPlugin = require('prerender-spa-plugin');

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

現(xiàn)在我們可以做一個生產(chǎn)構(gòu)建:

$ npm run production

如果您選中build文件夾，dist/index.html現(xiàn)在應(yīng)該如下所示，并使用預(yù)渲染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>

相關(guān)推薦：
2020年前端vue面試題大匯總（附答案）
vue教程推薦：2020最新的5個vue.js視頻教程精選

更多編程相關(guān)知識，請訪問：編程入門！！

當(dāng)前文章：node和laravel項目中預(yù)渲染vue.js應(yīng)用程序
分享鏈接：http://vcdvsql.cn/article14/chosge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、App開發(fā)、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站維護

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

node和laravel項目中預(yù)渲染vue.js應(yīng)用程序