node和laravel项目中预渲染vue.js应用程序的方法

这篇文章给大家分享的是有关node和laravel项目中预渲染vue.js应用程序的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为漳州企业提供专业的成都网站设计、成都网站制作，漳州网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

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

预渲染的优点

• 没有额外的服务器负载，因此比SSR更快更便宜
  

• 更简单的生产设置和更简单的应用程序代码，因此更不容易出错

• 不需要Node.js生产服务器

预渲染的缺点

• 对于显示不断变化的数据的页面(例如表)，不能很好地工作。

• 不适用于具有特定用户内容的页面，例如包含用户个人信息的帐户页面。然而，无论如何，这些类型的页面对于预呈现都不那么重要;这是我们主要的，经常使用的页面，我们想要提供快速。

• 你需要在应用程序中单独预渲染每条路线。

对照表

三、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，它会是这样的: