预渲染vue.js应用程序（使用node或laravel）

服务器端渲染现在非常流行。但它也并非没有缺点。预渲染是一种替代方法，在某些情况下甚至可能更好。下面我们来看一下如何预渲染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"><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>

英文原文地址：https://vuejsdevelopers.com/2017/04/01/vue-js-prerendering-node-laravel/

更多相关知识，请查阅 web前端学习！！

预渲染vue.js应用程序（使用node或laravel）相关推荐

[译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
为您的 Vue.js 应用程序选择最佳电子商务平台
自大流行以来,在线购物活动有所增加.2020 年,超过20 亿人在线购买了产品或服务,而且这一数字只增不减.预计到 2022 年底,仅美国的电子商务行业就将成为一个万亿美元的行业. 我们想涉足蓬勃发展 ...
tmdb电影票房_TMDb Vue.js应用程序：电影数据库应用程序
tmdb电影票房 TMDb Vue.js应用 (TMDb Vue.js app) TMDb Movie Search is a responsive Vue.js app. The Movie Dat ...
vue.js部署_如何将安全Vue.js应用程序部署到AWS
vue.js部署本文最初发布在Okta开发人员博客上 . 感谢您支持使SitePoint成为可能的合作伙伴. 编写Vue应用程序直观,直接,快捷. Vue具有较低的进入门槛,基于组件的方法以及诸如热 ...
微信商城小程序（服装鞋子商场）的设计与实现（Vue.js+小程序+.NET Core ）
目录第1章概述 1 1.1 项目背景介绍 1 1.2 微信小程序概述 1 1.2.1 微信小程序发展状况 2 1.2.2 微信小程序丰富的API接口 2 第2章相关技术概述 3 2.1 .NET ...
php 图片渲染,vue.js图片怎么渲染
vue.js渲染图片的方法:首先初始化列表:然后获取上个页面带过来的参数,获取api,app,foot:接着向后传递参数:最后渲染本地图片. [相关文章推荐:vue.js] vue.js渲染图片的方法 ...
uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
参考视频 vue参考文档 VueX 大型项目管理公共数据的工具作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都 ...
Vuex-一个专为 Vue.js 应用程序开发的状态管理模式
为什么会出现Vuex 非父子关系的组件如何进行通信?(Event Bus) bus.js import Vue from 'vue'; export default new Vue(); foo.vu ...
5个测试Vue.js程序的有用工具和库
原文 | https://blog.bitsrc.io/5-useful-tools-and-libraries-for-testing-vuejs-applications-13166f930da8 ...

预渲染vue.js应用程序（使用node或laravel）

预渲染vue.js应用程序（使用node或laravel）相关推荐

最新文章

热门文章