devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

nuxt介绍——nuxt2

作者：weixin_40725706 | 2024-08-12 21:02:57

赞

踩

nuxt

文章目录

服务端渲染和客户端渲染

客户端渲染和服务端渲染是页面渲染的两种方式。

客户端渲染CSR

客户端渲染则是在浏览器端使用js、html、css 以及前端框架（vue、React）等前端技术动态地生成和更新页面内容。

优点：

  • 提供更好的用户体验和交互性，由于页面内容的生成和更新是在浏览器端进行的，可以更快地响应用户的操作，减少页面刷新的延迟
  • 前后端分离的开发方式，可以提高开发效率。
  • 更便宜
  • 离线： 因为代码完全在浏览器中运行，所以它可以在互联网不可用时很好地继续工作。

缺点：

  • 性能较低的设备或网络较差的环境可能会导致加载和渲染速度变慢
  • 需要考虑搜索引擎优化（SEO）等问题
  • 客户端渲染的页面数据不易被爬虫获取
  • 非前后端分离的开发方式

适用

  • 一般适用于前后端分离的开发项目

客户端渲染原理：

客户端渲染渲染的流程是：

  • 在浏览器下载下载html文件
  • 解析当前界面的所有指令的 JavaScript 代码
  • 最后页面才会渲染出对应的元素。
    在这里插入图片描述

服务端渲染SSR

服务器端渲染是在服务器上生成完整的HTML页面，然后将其发送到浏览器进行展示。
优点：

  • 数据容易被抓取
  • 对seo优化友好
  • 提供快速的页面加载时间，同时保留客户端渲染的优势

缺点：

  • 对服务器的要求比较高

客户端渲染原理：

客户端渲染的流程是：

  • 服务器会向浏览器返回一个完全呈现的 HTML 页面。（此时页面已经可以显示对应的内容，因为是将生成的html直接展示，所以seo优化友好）
  • 客户端在后台加载服务器上运行的 javascript 代码。(此时服务器已经运行了js代码。无论 页面是预先生成并缓存还是动态呈现，服务器都在某个时刻运行了js代码)
  • 再次解析js代码，并启用html的交互性。（此过程称为Hydration）

在这里插入图片描述

为什么说服务端渲染比客户端渲染seo更友好

seo的本质

seo 本质是一个服务器（搜索引擎）向另一个服务器（我们的网站）发起请求，获取内容（这个过程就是爬虫），并解析请求内容。但一般来说搜索引擎是不会去执行请求到的JS的（只获取html内容）。（爬虫为seo服务）
即seo只解析html，不解析JS

原因

seo更友好说明容易被爬虫到，而爬虫爬取的是html的内容 .如果我们希望我们的网站被抓取和索引，我们必须为他们提供HTML。

  • 为什么说客户端渲染不友好？
    客户端渲染是指在前端进行页面的渲染，其中包含js内容进行页面的渲染（如循环遍历添加图片），但是搜索引擎大多数不识别js渲染出来的内容，所以seo不友好。

  • 为什么说服务端渲染友好呢？
    服务器端渲染是在服务器上生成完整的HTML页面，然后将其发送到浏览器进行展示，所以他的内容就是通过html渲染的，搜索引擎很容易抓取到，所以说seo友好。

Vue的客户端渲染和服务端渲染

客户端渲染

客户端vue seo不友好的原因

vue的客户端渲染一般就是前后端分离的开发方式，就是前端使用vue脚手架搭建的前端项目,seo不友好的原因：

  • 搭建起来的是一个单页应用（SPA），SPA通过JS动态渲染，流程一般是用过JS获取数据然后在模板展示，但是搜索引擎获取页面时不解析JS，所以获取到的模板信息也是没有数据的html，只是个变量名，所以seo不友好。
  • SPA需要加载大量的JS脚本和资源，而搜索引擎会认为该页面的加载速度过慢，从而降低了收录和排名的权重
  • 注意：搜索引擎抓取的内容不等于检查中元素的内容，检查中的内容是浏览器最终渲染的内容，搜索引擎抓取的是没有js解析的内容。

案例

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

服务端渲染

vue的服务端渲染需要依赖于 vue-server-renderer

案例

上面客户端渲染例子对应的服务端渲染的代码：

const express = require('express');
const app = express();
const Vue = require('vue');
 // 创建渲染函数
const renderer = require('vue-server-renderer').createRenderer();

app.get('/', (req, res) => {
 // 创建vue实例
  const vm = new Vue({
    template: `
      <div>
        <h1>{{ count }}</h1>
        <button @click="increment">Increment</button>
      </div>
    `,
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  });
  
  // 将vue实例渲染为HTML页面
  // renderer.renderToString(vue实例, (错误, 渲染后的html) => { })
  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error');
    } else {
      res.send(`
        <html>
          <head>
            <titleVue.js 服务端渲染和客户端渲染的区别</title>
          </head>
          <body>
            ${html}
          </body>
        </html>
      `);
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

vue-server-renderer的其他用法：

在vue-server-renderer2.5.0+中，如果renderToString没有传入回调函数就会返回Promise对象:

const Vue = require('vue')

// 创建vue实例
const app = new Vue({
    template: '<div>Hello</div>'
})

// 创建渲染函数
const renderer = require('vue-server-renderer').createRenderer()

// 将vue实例渲染为HTML页面
// renderer.renderToString(vue实例, (错误, 渲染后的html) => { })
renderer.renderToString(app, (err, html) => {
    if (err) throw err
    console.log(html);
})

// 在vue-server-renderer2.5.0+中，如果没有传入回调函数就会返回Promise对象
// Promise对象的成功的结果就是渲染后的html代码
renderer.renderToString(app).then(html => {
    console.log(html);
}).catch(err => {
    console.log(err);
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

nuxt是什么

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助我们快速开发服务器渲染的 Vue.js 应用程序（seo友好）。它提供了一些默认配置和约定，使得我们可以轻松地构建和部署应用程序。

nuxt的特点

Nuxt.js 具有以下特点：

  • 服务器端渲染（SSR）：Nuxt.js 可以在服务器端进行渲染，生成静态的 HTML 文件，并在客户端进行交互。这有助于提高应用程序的性能和搜索引擎优化，seo友好。
    但是也是可以可配置的，如果想要使用客户端渲染只需在nuxt.config.js文件中配置ssr:false即可。
  • 自动路由配置：Nuxt.js 根据文件结构自动生成路由配置，无需手动配置每个页面的路由。
  • 预处理器支持：Nuxt.js 内置了对流行的 CSS 预处理器（如 Sass、Less、Stylus）的支持，使得样式的编写更加灵活和高效。
  • 插件系统：Nuxt.js 提供了一个插件系统，可以轻松地集成第三方模块和库，扩展应用程序的功能。
  • 静态文件服务：Nuxt.js 可以将静态文件（如图片、样式、脚本）直接提供给客户端，无需额外的配置。

nuxt的运作方式

在这里插入图片描述

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

  • Vue 2
  • Vue-Router
  • Vuex (当配置了 Vuex 状态树配置项 时才会引入)
  • Vue 服务器端渲染 (排除使用 mode: ‘spa’)
  • Vue-Meta
  • 另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作

nuxt使用客户端渲染

如果您不想使用服务端渲染，使用客户端渲染，可以在nuxt.config.js中使用

ssr:false

  • 1
'
运行

进行配置即可。

nuxt使用单页面应用(SPA)

spa是客户端渲染下的一种应用模式。

nuxt2中配置SPA

  • 法一，使用nuxt --spa命令：如果不想使用服务器端渲染或需要应用程序提供静态托管，则可以使用 nuxt --spa 命令即可使用 SPA 模式。它为您提供了强大的 SPA 部署机制，无需使用 Node.js 来运行应用程序或任何特殊的服务器端处理。
  • 法二配置文件：
    nuxt.config.js
    mode:'spa'
ssr:false

    • 1
    • 2
    '
    运行

nuxt3中配置SPA

nuxt.config.js

ssr:false

  • 1
'
运行

nuxt静态化

静态化可以让你在任何一个静态文件服务器上托管你的 Web 应用。（理论上nuxt使用服务端渲染的话是不能直接托管在静态文件服务器上的）
NUXT支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 nuxt generate 命令实现。该命令依据应用的路由配置将每一个路由静态化成为对应的 HTML 文件。
eg：

-| pages/
----| about.vue
----| index.vue

  • 1
  • 2
  • 3

静态化后变成：

-| dist/
----| about/
------| index.html
----| index.html

  • 1
  • 2
  • 3
  • 4
  • 静态化的方式就是运行npm run generate命令，之后生成dist文件夹，文件夹的内容就是静态化后的内容。

静态化和打包的区别

Nuxt.js 的静态化和打包都是为了部署应用，但是它们之间有一些不同：

  • 打包，即构建(build)。是将你的源代码通过 webpack 打包成可以在浏览器中运行的 JavaScript、CSS 和 HTML 文件的过程。这些文件严格依赖于 Vue.js 在客户端的运行。使用打包构建的 Nuxt.js 应用

    • 如果是服务端渲染模式： 需要运行在一个服务端环境（Node.js 环境）中，即只能托管在有node环境的服务器上
    • 如果是客户端渲染（spa）模式：直接不是在静态文件服务器即可。

  • 静态化，即静态站点生成。可以在构建阶段将所有的路由视图预渲染成 HTML 和对应的 JavaScript 和 CSS 文件。每个页面的数据在构建时就已经获取并嵌入到 HTML 中，因此生成的站点可以在没有服务端的情况下，通过静态文件服务器进行托管，并无需 Node.js 环境。这种方式非常适合需要 SEO，或者要部署在 CDN 或者静态站点托管服务（如 GitHub Pages）的项目。

总结一下，打包和静态化的主要区别在于：打包需要服务端环境运行，而静态化不需要服务端环境，可以直接通过简单的文件服务器进行托管。

nuxt服务搭建

安装

  • 法一： vue init nuxt-conmuunity/starter-template 项目名 ：使用vue创建一个nuxt模板的矿建
  • 法二（推荐）：npx create-nuxt-app 项目名 运行该命令设置一些项目的基本配置。
  • 法三（npm）：若你的 npm 的版本是 6.1 及以上，你可以选择使用 npm 运行
    先安装：npm i -g create-nuxt-app
    再使用：npm init nuxt-app@latest 项目名

项目目录

在这里插入图片描述



export default {
  mode: 'universal',
  head: {
  },
  /**
   * 路由配置
   */
  router: {
  },

  /*
  ** loading样式
  */
  // loading: { color: '#399', height: '5px' },
  loading: '~/components/loading.vue',

  /*
  ** 全局样式
  */
  css: [
    'assets/css/transition.css',
    'element-ui/lib/theme-chalk/index.css'
  ],
  /*
  ** 全局插件
  */
  plugins: [
    // ~ 表示当前项目的根目录
  ],
  /*
  ** 开发模式的模块
  */
  devModules: [
  ],
  /*
  ** 模块
  */
  modules: [
    '@nuxtjs/axios',
  ],
  axios:{
    proxy:true, // 开启axios跨域
    // prefix:'api'//配置基本Url
  },
  proxy:{
    '/api/':{
      // 配置代理地址
      target: 'http://localhost:3001',
      changeOrigin:true,//跨域
    }
  },

  /*
  ** 打包配置
  */
  build: {
    transpile: [
      // 配置不打包的内容,elementui不需要打包
      'element-ui'
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

项目目录别名

别名目录
~ 或 @srcDir
~~ 或 @@rootDir

默认情况下，srcDir 和 rootDir 相同。

如: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

Nuxt项目的配置文件nuxt.config.js

所有的配置项地址：https://nuxt.com/docs/api/nuxt-config

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/971575
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号