這篇文章給大家分享的是有關node和laravel項目中預渲染vue.js應用程序的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站長期為上1000家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為漳州企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都網(wǎng)站制作，漳州網(wǎng)站改版等技術服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
服務器端渲染現(xiàn)在非常流行。但它也并非沒有缺點。預渲染是一種替代方法，在某些情況下甚至可能更好。下面我們來看一下如何預渲染vue.js應用程序。
在本文中，我們將探討預渲染如何與vue.js一起工作，并看兩個示例：一個是node.js項目，一個是laravel項目。
一、服務端渲染
基于javascript的應用程序的一個缺點是，瀏覽器從服務器接收到的頁面基本上是空的。在下載并運行Javascript之前，無法構建DOM。
這意味著用戶必須等待更長的時間才能看到任何東西。如果爬蟲程序不能快速查看頁面內(nèi)容，它也會對SEO產(chǎn)生影響。
服務器端呈現(xiàn)(SSR)通過在服務器上呈現(xiàn)應用程序來克服這個問題，以便客戶端在加載頁面時(甚至在Javascript運行之前)接收完整的DOM內(nèi)容。
而不是瀏覽器從服務器接收這個:
...
使用SSR，它接收一個完整的內(nèi)容頁面:
...
Your Server-Side Rendered App
Hello World
服務器端渲染缺點
你的應用程序需要在服務器上可執(zhí)行，所以你需要設計你的代碼是“通用的”，也就是說，它可以在瀏覽器和節(jié)點服務器上工作。
您的應用程序將運行在每一個請求到服務器，添加一個傳統(tǒng)的負載和緩慢的響應。緩存可以部分緩解這種情況。
你只能用Node.js做SSR。如果您的主后端是Laravel、Django等，那么您必須在主后端運行一個節(jié)點服務器來處理SSR。
二、預渲染
還有另一種方法可以解決空頁問題:預渲染。使用這種方法，您可以在部署應用程序之前運行應用程序，捕獲頁面輸出并用捕獲的輸出替換HTML文件。
它與SSR的概念基本相同，只是它是在開發(fā)環(huán)境中預先部署的，而不是在活動服務器中。
預渲染通常使用PhantomJS這樣的無頭瀏覽器來執(zhí)行，并且可以與Webpack、Gulp等一起集成到構建流中。
預渲染的優(yōu)點
預渲染的缺點
對照表
| 僅客戶端渲染 | 服務端渲染 | 預渲染 | | 生產(chǎn)服務器 | Any/none | Node.js only | Any/none |
| 額外的服務器負載 | No | Yes | No |
| 個性化用戶數(shù)據(jù)？ | N/A | Yes | No |
三、Vue.js預渲染示例
讓我們做一個簡單的例子來預渲染一個vue.js應用程序，一次在node.js環(huán)境中，一次在laravel環(huán)境中。
在這些示例中，我們將使用webpack和pre render spa插件來執(zhí)行預渲染。
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
}),
);現(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中的更改為。
第3步：測試Webpack生成版本
現(xiàn)在我們建造:
$ npm run build
我們的dist文件夾應該是這樣的:
- dist
-- build.js
-- index.html
-- logo.png
如果我們檢查dist/index.html，它會是這樣的:
vue-node-pr-test
現(xiàn)在我們可以使用http-server并從dist文件夾中提供應用程序。默認情況下，它將運行在localhost:8080:
$ ./node_modules/.bin/http-server ./dist
第4步：預渲染應用程序
現(xiàn)在我們的index.html文件在Webpack構建中，我們可以使用預呈現(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ù)是應用程序中的路由列表。在這個例子中，我們只有一條路徑。
現(xiàn)在我們再次建造：
$ npm run build
我們的構建將比以前花費更長的時間，因為預渲染插件正在做的事情:
它創(chuàng)建一個Phantom JS實例并運行應用程序
獲取DOM的快照
將快照輸出到生成文件夾中的HTML文件
它會對每條路徑重復這個過程，所以如果你有很多頁面，構建應用程序可能需要相當長的時間。
在建立后，我們的dist/index.html現(xiàn)在應該包括所有預渲染的HTML:
prerender-test
#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
}
Essential Links
- Core Docs
- Forum
- Gitter Chat
- Twitter
Ecosystem
- vue-router
- vuex
- vue-loader
- awesome-vue
重慶分公司
重慶分公司
