Mad*_*inX 7 prerender vue.js server-side-rendering nuxt.js
我写了一个简单的 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 功能的预渲染文件。比如build之后的文件如下：
// 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 项目有什么区别？
SSR 对我来说只是使用 Nuxt 时的优势之一。
当你在 SPA 模式下使用 Nuxt 时，还剩下一些事情：
pages文件夹中创建组件asyncData使用或fetch方法将数据加载到组件中的更简单方法一般来说，它提供了一种更结构化的方式来开发 Vue.js 应用程序。
| 归档时间： |
|
| 查看次数： |
2000 次 |
| 最近记录： |