這篇文章給大家分享的是有關node和laravel項目中預渲染vue.js應用程序的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
服務器端渲染現在非常流行。但它也并非沒有缺點。預渲染是一種替代方法，在某些情況下甚至可能更好。下面我們來看一下如何預渲染vue.js應用程序。
在本文中，我們將探討預渲染如何與vue.js一起工作，并看兩個示例：一個是node.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"> <h2>Your Server-Side Rendered App</h2> <div class="component-1"> <p>Hello World</p> <!--etc etc. This was all rendered on the server--> </app> </body>
服務器端渲染缺點
你的應用程序需要在服務器上可執行，所以你需要設計你的代碼是“通用的”，也就是說，它可以在瀏覽器和節點服務器上工作。
您的應用程序將運行在每一個請求到服務器，添加一個傳統的負載和緩慢的響應。緩存可以部分緩解這種情況。
你只能用Node.js做SSR。如果您的主后端是Laravel、Django等，那么您必須在主后端運行一個節點服務器來處理SSR。
二、預渲染
還有另一種方法可以解決空頁問題:預渲染。使用這種方法，您可以在部署應用程序之前運行應用程序，捕獲頁面輸出并用捕獲的輸出替換HTML文件。
它與SSR的概念基本相同，只是它是在開發環境中預先部署的，而不是在活動服務器中。
預渲染通常使用PhantomJS這樣的無頭瀏覽器來執行，并且可以與Webpack、Gulp等一起集成到構建流中。
預渲染的優點
沒有額外的服務器負載，因此比SSR更快更便宜
更簡單的生產設置和更簡單的應用程序代碼，因此更不容易出錯
不需要Node.js生產服務器
預渲染的缺點
對于顯示不斷變化的數據的頁面(例如表)，不能很好地工作。
不適用于具有特定用戶內容的頁面，例如包含用戶個人信息的帳戶頁面。然而，無論如何，這些類型的頁面對于預呈現都不那么重要;這是我們主要的，經常使用的頁面，我們想要提供快速。
你需要在應用程序中單獨預渲染每條路線。
對照表
| 僅客戶端渲染 | 服務端渲染 | 預渲染 | |
|---|---|---|---|
| 生產服務器 | Any/none | Node.js only | Any/none |
| 額外的服務器負載 | No | Yes | No |
| 個性化用戶數據？ | N/A | Yes | No |
三、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
我們的構建將比以前花費更長的時間，因為預渲染插件正在做的事情:
它創建一個Phantom JS實例并運行應用程序
獲取DOM的快照
將快照輸出到生成文件夾中的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
}
h2, h3 {
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">
<h2></h2>
<h3>Essential Links</h3>
<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>
<h3>Ecosystem</h3>
<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>
感謝各位的閱讀！關于“node和laravel項目中預渲染vue.js應用程序的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
