这篇文章给大家分享的是有关node和laravel项目中预渲染vue.js应用程序的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、
虚拟主机、营销软件、网站建设、
都兰网站维护、网站推广。
服务器端渲染现在非常流行。但它也并非没有缺点。预渲染是一种替代方法，在某些情况下甚至可能更好。下面我们来看一下如何预渲染vue.js应用程序。
在本文中，我们将探讨预渲染如何与vue.js一起工作，并看两个示例：一个是node.js项目，一个是laravel项目。
一、服务端渲染
基于javascript的应用程序的一个缺点是，浏览器从服务器接收到的页面基本上是空的。在下载并运行Javascript之前，无法构建DOM。
这意味着用户必须等待更长的时间才能看到任何东西。如果爬虫程序不能快速查看页面内容，它也会对SEO产生影响。
服务器端呈现(SSR)通过在服务器上呈现应用程序来克服这个问题，以便客户端在加载页面时(甚至在Javascript运行之前)接收完整的DOM内容。
而不是浏览器从服务器接收这个:
...
使用SSR，它接收一个完整的内容页面:
...
Your Server-Side Rendered App
Hello World
服务器端渲染缺点
你的应用程序需要在服务器上可执行，所以你需要设计你的代码是“通用的”，也就是说，它可以在浏览器和节点服务器上工作。
您的应用程序将运行在每一个请求到服务器，添加一个传统的负载和缓慢的响应。缓存可以部分缓解这种情况。
你只能用Node.js做SSR。如果您的主后端是Laravel、Django等，那么您必须在主后端运行一个节点服务器来处理SSR。
二、预渲染
还有另一种方法可以解决空页问题:预渲染。使用这种方法，您可以在部署应用程序之前运行应用程序，捕获页面输出并用捕获的输出替换HTML文件。
它与SSR的概念基本相同，只是它是在开发环境中预先部署的，而不是在活动服务器中。
预渲染通常使用PhantomJS这样的无头浏览器来执行，并且可以与Webpack、Gulp等一起集成到构建流中。
预渲染的优点
预渲染的缺点
对照表
| 仅客户端渲染 | 服务端渲染 | 预渲染 |
|---|
| 生产服务器 | 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中的更改为。
第3步：测试Webpack生成版本
现在我们建造:
$ npm run build
我们的dist文件夹应该是这样的:
- dist
-- build.js
-- index.html
-- logo.png
如果我们检查dist/index.html，它会是这样的:
vue-node-pr-test
现在我们可以使用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:
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
