nuxt介绍——nuxt2

_洋

已于 2024-04-10 17:13:32 修改

阅读量636

点赞数 2

分类专栏： Nuxt2+Nuxt3 文章标签： javascript

于 2023-07-18 22:57:27 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/131650173

版权

Nuxt2+Nuxt3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

服务端渲染和客户端渲染

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

客户端渲染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>

服务端渲染

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');
});

`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);
})

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

进行配置即可。

nuxt使用单页面应用(SPA)

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

nuxt2中配置SPA

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

nuxt3中配置SPA

nuxt.config.js

ssr:false

nuxt静态化

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

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

静态化后变成：

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

静态化的方式就是运行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 项目名

项目目录

在这里插入图片描述

editorconfig:代码的高亮配置
nuxt.config.js：nuxt的配置文件， nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
head：该配置项用于配置应用默认的 meta 标签。
loading：该配置项用于个性化定制 Nuxt.js 使用的加载组件。
modules：该配置项允许您将 Nuxt 模块添加到项目中。
modulesDir：该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。
plugins：该配置项用于配置那些需要在根vue.js应用 实例化之前需要运行的 Javascript 插件。
build：打包配置。
css：定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
dev：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
env：该配置项用于定义应用客户端和服务端的环境变量。
rootDir：该配置项用于配置 Nuxt.js 应用的根目录。
router：该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。
generate：该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
server：此选项允许您配置 Nuxt.js 应用程序的服务器实例变量。
srcDir：该配置项用于配置应用的源码目录路径。
dir：此选项允许您配置 Nuxt.js 应用程序的自定义目录。
transition：该配置项用于个性化配置应用过渡效果属性的默认值。—— 也可以在页面组件中作为配置项单独使用
eg：nuxt.config.js



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) {
    }
  }
}

项目目录别名

别名	目录
~ 或 @	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

_洋

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nuxt介绍——nuxt2

客户端渲染是指在前端进行页面的渲染，其中包含js内容进行页面的渲染（如循环遍历添加图片），但是搜索引擎大多数不识别js渲染出来的内容，所以seo不友好。上生成完整的HTML页面，然后将其发送到浏览器进行展示，所以他的内容就是通过html渲染的，搜索引擎很容易抓取到，所以说seo友好。seo 本质是一个服务器（搜索引擎）向另一个服务器（我们的网站）发起请求，获取内容（.如果我们希望我们的网站被抓取和索引，我们必须为他们提供HTML。客户端渲染和服务端渲染是页面渲染的两种方式。vue的服务端渲染需要依赖于。
复制链接

扫一扫