node和laravel專案中預渲染vue.js應用程式-Vue.js-PHP中文網

首頁

web前端

Vue.js

node和laravel專案中預渲染vue.js應用程式

青灯夜游

Sep 27, 2020 pm 02:04 PM

laravelnodevue.js

node和laravel專案中預渲染vue.js應用程式

伺服器端渲染現在非常流行。但它也並非沒有缺點。預渲染是一種替代方法，在某些情況下甚至可能更好。下面我們來看看如何預先渲染vue.js應用程式。

在本文中，我們將探討預先渲染如何與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 id="Your-nbsp-Server-Side-nbsp-Rendered-nbsp-App">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生產伺服器

預先渲染的缺點

#對於顯示不斷變化的資料的頁面(例如表)，不能很好地工作。
不適用於具有特定使用者內容的頁面，例如包含使用者個人資訊的帳戶頁面。然而，無論如何，這些類型的頁面對於預呈現都不那麼重要;這是我們主要的，經常使用的頁面，我們想要提供快速。
你需要在應用程式中單獨預先渲染每條路線。

對照表

##額外的伺服器負載NoYesNo個人化使用者資料？ N/AYesNo#

三、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(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: &#39;./index.html&#39;,
    inject: false
  }),
);

现在我们改变了我们的Webpack公共路径，因为index.html现在和其他静态资产在同一个文件夹中:

output: {
  path: path.resolve(__dirname, &#39;./dist&#39;),
  filename: &#39;build.js&#39;,
  publicPath: &#39;/&#39;, // was originally &#39;dist&#39;
},

由于路径的变化，我们还需要将index.html中的更改为。

第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(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    path.join(__dirname, &#39;./dist&#39;),
    [ &#39;/&#39; ]
  )
);

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="/static/imghwm/default1.png"  data-src="/logo.png?82b9c7a5a3f405032b1db71a25f67021"  class="lazy"   alt="node和laravel專案中預渲染vue.js應用程式" >
  <h1></h1>
  <h2 id="Essential-nbsp-Links">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 id="Ecosystem">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(&#39;/&#39;, function () {
  return File::get(public_path() . &#39;/index.html&#39;);
});

这实际上指向我们的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(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: Mix.Paths.root(&#39;resources/views/index.html&#39;),
    inject: false
  });
);

第4步：测试Weback生成版本

现在让我们为生产和服务:

$ npm run production
$ php artisan serve

不过，在运行应用程序时，浏览器中可能会出现错误，因为我们从未为window.Laravel.csrfToken设置值。对于这个简单的例子，注释掉会更快，所以像这样修改resources/assets/js/bootsta .js:

window.axios.defaults.headers.common = {
  &#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;
  // &#39;X-CSRF-TOKEN&#39;: window.Laravel.csrfToken;
};

第5步：预渲染应用程序

我们现在需要在webpack配置中使用prerender spa插件来执行预渲染。确保它在HTML网页包插件之后。

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    Mix.output().path,
    [ &#39;/&#39; ]
  )
);

现在我们可以做一个生产构建:

$ 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&#39;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视频教程精选

更多编程相关知识，请访问：编程入门！！

	僅客戶端渲染	服務端渲染	預先渲染
#生產伺服器	Any/none	Node.js only	Any/none

以上是node和laravel專案中預渲染vue.js應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：vuejsdevelopers。如有侵權，請聯絡admin@php.cn刪除

vue.js和前端堆棧：了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成，提升開發效率和用戶體驗。 1)構建工具：與Webpack、Rollup集成，實現模塊化開發。 2)狀態管理：與Vuex集成，管理複雜應用狀態。 3)路由：與VueRouter集成，實現單頁面應用路由。 4)CSS預處理器：支持Sass、Less，提升樣式開發效率。

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面，因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1）組件化設計讓Netflix將界面分解成可管理的小組件，提高了開發效率和代碼可維護性。 2）虛擬DOM機制通過最小化DOM操作，確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。

vue.js在前端的力量：關鍵特徵和好處Apr 21, 2025 am 12:07 AM

Vue.js是一個漸進式的JavaScript框架，適用於構建高效、可維護的前端應用。其關鍵特性包括：1.響應式數據綁定，2.組件化開發，3.虛擬DOM。通過這些特性，Vue.js簡化了開發過程，提高了應用性能和可維護性，使其在現代Web開發中備受歡迎。

vue.js比反應好嗎？Apr 20, 2025 am 12:05 AM

Vue.js和React各有優劣，選擇取決於項目需求和團隊情況。 1)Vue.js適合小型項目和初學者，因其簡潔和易上手；2)React適用於大型項目和復雜UI，因其豐富的生態系統和組件化設計。

vue.js的功能：增強前端的用戶體驗Apr 19, 2025 am 12:13 AM

Vue.js通過多種功能提升用戶體驗：1.響應式系統實現數據即時反饋；2.組件化開發提高代碼復用性；3.VueRouter提供平滑導航；4.動態數據綁定和過渡動畫增強交互效果；5.錯誤處理機制確保用戶反饋；6.性能優化和最佳實踐提升應用性能。

vue.js：定義其在網絡開發中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web開發中的角色是作為一個漸進式JavaScript框架，簡化開發過程並提高效率。 1)它通過響應式數據綁定和組件化開發，使開發者能專注於業務邏輯。 2)Vue.js的工作原理依賴於響應式系統和虛擬DOM，優化性能。 3)實際項目中，使用Vuex管理全局狀態和優化數據響應性是常見實踐。