我编写了一个简单的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,该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项目有什么区别?
我编写了一个简单的Nuxtjs项目。根据我从Nuxtjs文档中学到的知识以及测试过程中的经验,我无法理解'Nuxtjs SPA模式'和'没有...的Vuejs之间的区别...
使用Nuxt时,SSR对我来说只是一个优势。