NuxtJ为动态网站生成?

时间:2019-08-26 03:24:13

标签: vue.js vuejs2 nuxt.js

我正在用NuxtJs创建一个简单的演示应用程序。主页显示不经常更改的静态内容。还有另一种显示用户列表的途径:/users。用于显示用户详细信息的一个:/user/id

现在我的问题是nuxt generatenuxt build有什么区别?我应该使用哪一个?

我认为nuxt generate页不会呈现usersuser/id之类的动态路由,对吗?如果我是对的,那么generate命令将只为主页生成一个预渲染的HTML。因此,使用generate总是比使用build对更好吗?

3 个答案:

答案 0 :(得分:5)

universal模式下,nuxt generate用于生成静态站点。 nuxt build用于SSR网站。

在2.13.0中,Nuxt引入了target: static功能,请确保 检查it

静态站点具有最佳性能,并且易于部署在nginx或其他服务上,例如Netlify

默认情况下,nuxt generate仅呈现静态首页和/users页面,而不呈现动态/user/:id路由。

但是您可以config nuxt来帮助您生成动态路由。

  1. 如果您有一组固定的用户,则可以使用功能来generate the routes

  2. 如果用户数据一直在变化,则可以config nuxt退回到动态路由上的SPA。但是,在动态路线上使用SEO并不会获得任何好处。

对于SPA后备广告,请在generate config中定义SPA后备广告的自定义页面:

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

在部署中(例如在Nginx中)配置后备页面以用于未知路由:

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

nuxt build将为您建立一个SSR网站。 html在服务器上呈现并发送到客户端。它在服务器上增加了一些工作负载,也许部署起来不那么容易,但是主要收益是SEO。对于某些使用低端设备或互联网连接速度较慢的用户,也许您的网站的性能要比在SPA模式下取消定位更好。

基本上,您需要考虑:

  1. 网站的内容是静态的还是不断变化的?

nuxt generate表示静态。具有动态路由的网站的nuxt generatenuxt buildspa模式。

  1. 您需要SEO吗?

SPA不会获得任何SEO。

  1. 您如何部署网站?

对于静态托管服务,只有nuxt generatespa模式有效。

  1. 您的网站上挤满了js代码,并且您希望互联网和设备慢的用户获得最佳性能。或者SEO对于您的网站而言具有大量动态内容很重要。

SSR适合您,请使用nuxt build

答案 1 :(得分:1)

Nuxt中有三种不同的部署和生成选项。

通用模式


在这种模式下,您将构建项目,然后将其发送到node.js服务器,第一个视图始终在服务器上动态呈现,然后变为SPA,并在客户端中工作。对于SEO和使用API​​来说,这非常好,但是您不能将其上传到任何托管,例如在共享的VPS上。

所以-这里需要Node.js主机。

SPA


基本上可以了解Vue.js的默认工作方式,实际上完全没有SEO ,您可以将其上传到共享的VPS托管中,因为它只是一个index.html和build.js文件,完全在客户端(在浏览器中)工作。

我们可以在这里进行静态托管。

静态应用


这是Nuxt.js发挥作用的地方,因为此模式将为dist文件夹中的每条路由生成一个index.html文件和相应的js / css资产,然后您可以仅提取这些文件并上传它们到任何主机,您在这里不需要服务器,因为您的第一个视图已经预先渲染,与Universal节点服务器应该预渲染第一个视图不同。因此,您在这里获得SSR,据我了解,您的主要演唱会是如果您也获得SPA,那是在Universal模式下最好的部分,在第一个请求继续在SPA模式下运行之后,这有多好? / p>

无论如何,您都应该考虑一些事项,如果您想为动态内容生成index.html,则需要做出一些可以消除情绪的事情。您需要将此添加到nuxt-config.js

generate: {
    routes: () => {
      return [
        '/posts/1'
      ]
    }    
  }

您还可以使用axios在此处发出http请求并返回数组。甚至从文件中导出默认数组,并将其包含在此处,您可以在其中组合所有动态路由。这是一项一次性的工作,但是如果您在后端添加新的对象,那将再增加1个在执行nuxt generate时运行的请求,应在nuxt-config中进行描述。

因此,这就是我宁愿为服务器支付更多费用,而是托管通用应用程序(而不是静态生成)的原因,因为按照我个人的观点,这并不是真正适合使用API​​的部分,但是无论如何都是美好的未来。

答案 2 :(得分:-1)

当您的网站经常更新数据时,您无需使用CREATE GLOBAL TEMPORARY TABLE MY_GTT ( SEQ_ID NUMBER, C001 VARCHAR2(4000 BYTE), C002 VARCHAR2(4000 BYTE), C003 VARCHAR2(4000 BYTE), C004 VARCHAR2(4000 BYTE), C005 VARCHAR2(4000 BYTE), C006 VARCHAR2(4000 BYTE), C007 VARCHAR2(4000 BYTE), C008 VARCHAR2(4000 BYTE), C009 VARCHAR2(4000 BYTE), C010 VARCHAR2(4000 BYTE), C011 VARCHAR2(4000 BYTE), C012 VARCHAR2(4000 BYTE), C013 VARCHAR2(4000 BYTE), C014 VARCHAR2(4000 BYTE), C015 VARCHAR2(4000 BYTE), C016 VARCHAR2(4000 BYTE), C017 VARCHAR2(4000 BYTE), C018 VARCHAR2(4000 BYTE), C019 VARCHAR2(4000 BYTE), C020 VARCHAR2(4000 BYTE) ) ON COMMIT PRESERVE ROWS; 网站来进行构建,您的网站静态,快速加载且对搜索引擎友好,对搜索引擎更安全,并且如果您的项目中有数据NuxtJS可以从以下位置下载所有数据数据库并将数据静态更改为.json文件。

如果您的网站从数据库加载数据,则必须使用403 Forbidden Execution of request failed: https://www.google.com/m8/feeds/contacts/default/full?max-results=99999" code: 403, The caller does not have permission status : PERMISSION_DENIED 从数据库动态加载数据。对没有客户端渲染的单个页面使用模式“ spa”,而对客户端渲染在npm generate中使用“通用”模式。

用于动态路由,请使用npm build从数据库中更改路由参数。