在最新版本的Nuxt(2.14)中,他们引入了一种优化方法,用于在不更改代码的情况下构建应用程序(大幅提高构建时间).

我在jamstack中创建网站,在netlify上部署nuxt generate个,到目前为止,部署target: 'server'个.为了利用这一新功能,我try 了新的target: 'static',但我的代码不会生成,因为在这种模式下,应用程序无法访问this.$route以生成动态页面.

所以,我的问题是:这两者有何不同?当我切换到target时,我必须注意什么?

推荐答案

Update:

根据latest documentationmode: 'universal'mode: 'spa'被否决,而ssr: truessr: false被否决.

Full static works only with target: 'static' and ssr: true (counterpart of deprecated mode: 'universal'). The ssr: true is a default value. The ssr: false is a counterpart of the deprecated mode: 'spa' and cannot be used with target: 'static'. enter image description here

Original answer:

目标

target属性视为hosting environment可能会有所帮助——无论您需要服务器还是CDN提供的静态文件都足以满足您的场景.尽管它被称为target: 'server'it doesn't mean your app is server-side rendered(见下文mode).

在生产环境中使用static target时,您只需要一个CDN即可为静态文件提供服务.这些静态文件是在构建时准备好的,并且是"最终的"(直到下一个包含更新内容或代码的构建).在这种情况下不需要任何服务器(CND和build server除外,它可能会在您的CI管道中).

目标 & Mode

另一方面,当使用server目标时,您的生产应用程序将需要一个服务器环境,在该环境中,客户端请求的响应将被合成并发送.这意味着有了更新的内容,就不需要重新构建应用程序.此内容是在请求服务器后编写的.这适用于-universalspa模式.在universal模式下,你的应用程序是服务器端渲染的.相比之下,spa模式没有服务器端呈现(只有客户端导航),整个应用程序作为单页应用程序运行

enter image description here

Server vs. Static 目标

对于新手来说,决定使用服务器端渲染还是静态渲染可能有点棘手.一个可能有助于你做出决定的好问题是,你是否需要为不同的用户/环境 for each 页面/文档/内容项提供不同的内容.如果是这样的话,你可能应该 Select 目标server,否则是static.

每种方法都有其优缺点,比如服务器需求、安全性、速度、CI管道/构建过程、SEO、价格等.正确的 Select 取决于您的用例.

正如您正确提到的,从版本2.13开始,有两个可用的部署目标.它们是serverstatic.Source

旧方法有一些问题和困难,主要是客户端通过asyncDatafetch函数请求API进行导航.因此,生成的站点不是纯粹的静态站点.旧方法的所有缺点都在here中描述.

使用新的static目标(同时强制universal模式)方法,nuxt generate命令将预呈现所有HTML页面并模拟异步数据请求.这一次,旧的asyncDatafetch没有向客户端请求API.这已经在构建期间执行.Source

关于路由.nuxt的爬虫程序可能不会自动检测到上述路由,您应该使用generate.routes属性手动生成它们.

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://my-api/users').then(res => {
        return res.data.map(user => {
          return '/users/' + user.id
        })
      })
    }
  }
}

Vue.js相关问答推荐

传单 vue3 组件变体打开错误的标记 - 单击时弹出

有没有办法在 Quasar 中为明暗模式创建我自己的 colored颜色 ?

何时将代码拆分为 Nuxt 中的组件?

禁用 vue-cli webpack 编码图像 base64

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

如何在 vuejs 自定义指令中传递动态参数

在 Vue 项目之间共享assets和组件

vuetifyjs:仅添加使用过的图标来构建

Vue 单元测试:您正在开发模式下运行 Vue?

Vue:限制文本区域输入中的字符,截断过滤器?

Vue 两种方式的 prop 绑定

在 vue-router 中带有路由的 Vuejs2 模态

如何有条件地更改 vue/vuetify 文本字段 colored颜色

如何从 vue.js 中的自定义组件中冒泡点击事件?

在组件之间共享数据

删除一行后刷新 Bootstrap-Vue 表

try 通过 Vue.js 中的渲染传递props并观察它们

未在实例上定义,但在渲染期间引用

laravel vuejs/axios put request Formdata 为空

vue-router 如何使用 hash 推送({name:"question"})?