在本文中，我们将探讨预渲染如何与vue.js一起工作，并看两个示例：一个是node.js项目，一个是laravel项目。
相关教程推荐：node js教程 、vue.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"> <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>
服务器端渲染缺点
你的应用程序需要在服务器上可执行，所以你需要设计你的代码是“通用的”，也就是说，它可以在浏览器和节点服务器上工作。
您的应用程序将运行在每一个请求到服务器，添加一个传统的负载和缓慢的响应。缓存可以部分缓解这种情况。
你只能用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 } 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('/', 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>
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是node和laravel项目中预渲染vue.js应用程序的详细内容。