时间戳

首页 > 解决方案 > “Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”的区别

vue.js - “Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”的区别

问题描述

我写了一个简单的 Nuxtjs 项目。根据我从 Nuxtjs 文档中学到的知识以及我在测试它时的经验，我无法理解“Nuxtjs SPA 模式”和“没有 Nuxtjs 的 Vuejs”之间的区别

例如在以下页面中：

// pages/index.vue

<template>
    <div class="userip">{{userip}}</div>
</template>

<script>
    export default {
        data() {
           return {
               userip: 'in process ...'
           }
        },

        async asyncData() {
            let res = await fetch("https://api6.ipify.org?format=json")
            .then(response => response.json());

            return {userip: res.ip}
        }
    }
</script>

如果我运行以下命令：

cmd: nuxt generate

虽然 Nuxtjs 配置为通用模式，但它为我提供了在用户浏览器上也具有 SPA 功能的预渲染文件。例如构建后的文件如下：

// dist/index.html

<body>
  ...
    <div class="userip">14.182.108.22</div>
  ...
</body>

当我跑步时

cmd: nuxt start

或者

cmd: nuxt dev

在不生成预渲染文件的情况下，它会生成一个真正的 SSR，在每个请求上都会渲染。现在，如果我运行以下命令：

cmd: nuxt generate

在 Nuxtjs 的 SPA 模式下，它给了我一些未渲染的 SPA 文件（比如在不使用 Nuxtjs 的情况下构建 Vuejs 项目）。以下是示例输出：

// dist/index.html

<body>
  ...
    <div id="__nuxt"><style>#nuxt-loading { ... } ...</style></div>
  ...
</body>

它甚至不包含内部呈现的组件。

在实时模式下（不生成预渲染文件），

cmd: nuxt start

或者

cmd: nuxt dev

它将未渲染的文件提供给客户端。

那么，使用 Nuxtjs 的 SPA 模式的 Vuejs 项目和根本不使用 Nuxtjs 的 Vuejs 项目有什么区别？

标签： vue.jsnuxt.jsserver-side-renderingprerender

解决方案

使用 Nuxt 时，SSR 对我来说只是优势之一。

当您在 SPA 模式下使用 Nuxt 时，还剩下一些事情：

  • 您不必关心路由只需在pages文件夹中创建组件
  • asyncData使用orfetch方法更容易将数据加载到组件中
  • 轻松设置 Vuex，包括自动命名空间存储模块

一般来说，它提供了一种更结构化的方式来开发 Vue.js 应用程序。

推荐阅读