Nuxt3学习总结（05）

最新推荐文章于 2024-08-12 23:35:15 发布
最新推荐文章于 2024-08-12 23:35:15 发布
阅读量721 收藏
点赞数
分类专栏： 前端 文章标签： 学习 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34185872/article/details/131340614
版权
nuxt.config.ts 配置详解

nuxt.config.ts 文件中常见配置选项：

import type { NuxtConfig } from 'nuxt';

const config: NuxtConfig = {
  // 全局页面标题: https://go.nuxtjs.dev/config-head
  head: {
    title: 'My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // 全局 CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // 页面装载之前的插件: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // 自动导入组件: https://go.nuxtjs.dev/config-components
  components: true,

  // 开发和构建的模块 (推荐): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // 模块: https://go.nuxtjs.dev/config-modules
  modules: [],

  // 构建配置: https://go.nuxtjs.dev/config-build
  build: {},

  // 服务器配置: https://nuxtjs.org/docs/3.x/features/nuxt-server#configure-http-server
  server: {
    port: 3000, // 默认: 3000
    host: '0.0.0.0' // 默认: localhost
  }
}

export default config;

  • head：该属性用于配置应用程序的 HTML 标头。在此处可以定义标题、元标记和链接到外部文件（例如样式表和 favicon）。

  • css：该属性用于定义应该包含在应用程序中的 CSS 文件。

  • plugins：该属性用于定义应包含在应用程序中的插件。

  • components：该属性设置是否应自动从 components/ 目录中导入组件。

  • buildModules：该属性用于定义应在构建过程中使用的模块（例如 @nuxt/typescript-build、@nuxtjs/tailwindcss）。

  • modules：该属性用于定义应导入到应用程序中的模块。

  • build：该属性用于配置应用程序的构建过程。您可以通过定义选项来自定义构建过程，例如输出目录、用于块和文件的文件名以及要使用的插件。

  • server：该属性用于配置 HTTP 服务器。您可以定义服务器应监听的端口和主机。

Nuxt 只认 nuxt.config.ts，因此一些大家熟悉的独立配置文件会被忽略，作为替代，nuxt.config.ts 中会有对应的配置项，如 postcss、vite、webpack.

app.config.ts 配置详解

app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt插件并使用HMR(热模块替换)编辑它。

export default defineAppConfig({
  accessKey: 'key'
})

不能把一些涉密的值放在app.config文件，可以使用.evn这样的配置文件配置环境变量，将覆盖app.config配置文件中的配置

app.config.ts 中配置

   // 只能用于服务端的 keys
    apiKey: 'test',
    // 可用于客户端的 keys
    public: {
      apiBase: '/api'
    }

.evn文件,需要加NUXT_前缀，且需要转为大写

NUXT_API_KEY=api_token
NUXT_PUBLIC_API_BASE=https://test.com
端口号配置
{
  "scripts": {
    "dev": "nuxt dev --port=8080"
  }
}
useHead

Nuxt 提供了一个 useHead() 可以在组件内修改 meta 信息

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My site.' },
    { name: 'keywords', content: 'nuxt、nuxt3、vue' }
  ],
  bodyAttrs: {
    test: 'test'
  },
  script: [ { children: 'console.log('Hello world')' } ]
})
</script>

可在每个页面单独设置信息

useHead({
  title: '文章详情'
})

可以设置标题模板

<script setup lang="ts">
useHead({
  titleTemplate: (title) => {
    return title ? `${title} - 我的网站` : "我的网站";
  },
});
</script>

这样子页面如果设置了title，就能拼接上该模板，一起展示。

Nuxt 还提供了多种组件可以在模板中设置具体页面页头信息：

<Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> , <Head>
叶落风尘
关注
专栏目录
Nuxtjs初学习
晟松的博客
02-21 1534
Nuxtjs初学习 怎么说啦，学这个主要是为了解决seo的问题，使用服务端渲染，给用户更好的体验 官网 一位大佬的简单教程 B站视频教程 注意上面的beforecreated和created两个钩子，这两个钩子既可以跑在服务端，也可以跑在客户端。有一个验证就是，使用console，服务端的会再终端里面打印出来，而客户端的会在浏览器的控制台打印出来 剩下的其他部分就是vue自己的其他生命周期钩子了，如mounted这些 在服务器端的钩子不能访问客户端的对象，如window对象，只能获取到服务器的上下文con
SSR服务器端渲染(Nuxt.js总结和豆瓣电影项目)
庚中
10-26 1249
引言 开始之前,我们先了解一下普通前端渲染过程: 而加了SSR的服务器渲染过程: 明显请求次数变少了,速度更快.那接下来隆重介绍服务端渲染 什么是服务器端渲染 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。 服务端渲染：前端发出请求后，后端在将HTM...
nuxt3: 不同环境.env文件应用
peade的博客
11-11 3241
在经过一番努力查找之后，终于知道到了具体使用方法。文件来获取环境变量，但对于如何配置不同环境的。文件则语焉不详，根本找不到具体使用方法。从上图，可以看出，只要通过设置。等文件来配置环境变量是在。在文档中明确提到支持。
vue3+vite+ts 配置@时vscode报找不到__dirname的问题
yuhaiyang11的博客
08-17 4553
vue3+vite+ts 配置@时vscode报找不到__dirname的问题
vite + react 配置路径别名报错：找不到名称‘__diename‘ 、找不到模块path或其对应类型声明、找不到模块“@/xxx“或其对应类型说明
最新发布
weixin_52268321的博客
08-12 258
【代码】vite + react 配置路径别名报错：找不到名称‘__diename‘ 、找不到模块path或其对应类型声明、找不到模块“@/xxx“或其对应类型说明。
TS，找不到名称“__dirname”。ts(2304)
热门推荐
CSDN for recording problems
02-21 1万+
解决方案： npm install --save-dev @types/node
vue3+vite+ts 自定义项目别名
u014520406的博客
05-19 1387
默认配置文件内容如下 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()] }) 1.使用resolve.alias 内容修改如下 会有如下报错内容 找不到模块“path”或其相应的类型声明。 找不到名称“__dirname” 处理方案：
nuxt安装与IP端口配置
chenzimin_blog
11-01 7988
一、Nuxt安装与运行 作为一个使用Nuxt开发的新手，在配置域名访问之前，先回顾一下Nuxt的快速安装。根据在【Nuxt官网】的安装说明，在安装的过程中会有一些配置，可以根据个人需要进行处理。另外说明，如果电脑还没有安装npx的，自行去安装。我的安装和配置见下图： 见到下图的内容，就说明项目安装成功： 这时候就可以直接根据框内的说明启动项目了： 在浏览器上输入本地访问地址： 从以上整个流...
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
06-21
《构建基于Vite+Vue3+TS+Nuxt3的仿爱彼迎(Airbnb)网站源码解析》 在现代Web开发中，快速迭代和高效构建成为开发者关注的重点。本项目"基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码"正是这样一个实践案例，它巧妙地...
全局安装nuxt_Nuxt爬坑
weixin_39855944的博客
12-22 1425
nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态html。1.那 服务器 端渲染到底有什么好处呢？主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作，Nuxt.js适合作新闻、博客、电影、咨询这样的需...
vite项目报错：在没有 “node“ 模块解析策略的情况下，无法指定选项 “-resolveJsonModule“。
o0way0o的博客
11-10 1588
vite搭建react项目，在tsconfig.json文件报错在没有 “node” 模块解析策略的情况下，无法指定选项 “-resolveJsonModule”。
Nuxt3去掉body中默认的边距
04-16 401
在nuxt.config.ts中添加以下一行即可。
nuxt3路由(Routing)使用讲解
CXW1014的专栏
02-11 2678
基于文件系统的路由是nuxt一个核心特色。每一个在pages/目录下的vue文件，被会被框架创建一个对应的URL(也叫路由)。每个pages/目录下的vue文件就是一个页面。Nuxt利用代码拆分方式为请求的路由提供最少的JavaScript。
nuxt3.0学习-三、nuxt.config.ts配置、跨域处理以及浏览器适配处理
不确定因素的博客
06-07 6851
nuxt.config.ts配置、跨域处理以及浏览器适配处理
node 项目中 __dirname / __filename 是什么，为什么有时候不能用？
qq_17335549的博客
12-28 1055
是一个全局变量，可在任何地方使用，用于获取当前模块文件所在的目录路径。它不是由用户定义的，而是由 Node.js 运行时提供的。是一个全局变量，而不是一个模块的属性。因此，在 CommonJS 模块中，你可以直接使用。是 Node.js 中的一个特殊变量，表示当前执行脚本所在的目录的绝对路径。可以方便地构建文件的绝对路径，而不受当前工作目录的影响。来获取当前模块的 URL 信息。不再被支持，你需要使用。在 Node.js 中，，但在 ES6 模块中，
部署nginx和nuxt，80端口指向nuxt的3000端口
weixin_43337481的博客
06-18 477
参考链接：https://blog.csdn.net/weixin_40918145/article/details/130614276。问题：http默认端口是80，而nuxt项目默认端口是3000。前面试了好多次都不行，重点在这句。
Nuxt3: useFetch使用过程常见一种报错
q1003675852的博客
03-13 2659
本文主要记录了Nuxt3在使用useFetch时遇到的nuxt instance unavailable或A composable that requires access to the Nuxt instance was called outside of a plugin...报错问题及其产生的原因。
Nuxt.js更改指定端口号
橙-极纪元-cplvfx-JJY.Cheng
03-05 4614
转载：https://www.cnblogs.com/antyhouse/p/12517088.html 直接在package.json里面去加一段 "config": { "nuxt": { "host": "0.0.0.0", "port": "3333" //你就写与冲突的端口号不同的就行 } } 完整代码 { "name": "firstproject", "version": ".
nuxt3-SEO篇
CXW1014的专栏
02-12 1596
通过Nuxt提供的强大的head config，组合式函数和组件来提升你的网站的的SEO。
深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
08-23
### 回答1： Vue SSR（Server Side Rendering）服务端渲染是一种在服务器端将Vue组件渲染成HTML字符串的技术。Vue SSR可以提高应用程序的性能和搜索引擎优化。在此基础上，Nuxt.js是一个基于Vue.js的通用应用框架，它通过一个命令行工具来创建和管理Vue SSR应用程序。Nuxt.js提供了一些默认的配置，使得创建Vue SSR应用程序变得非常简单。 CNode社区是一个专门讨论Node.js技术的社区，许多Node.js开发者都会在这里交流。在本文中，我们将使用Nuxt.js来创建一个CNode社区的SSR应用程序。我们将使用CNode社区提供的API来获取帖子列表，然后使用Nuxt.js来将其渲染成HTML字符串，最后将其呈现给用户。 首先，我们需要安装Nuxt.js和一些必要的依赖项。可以使用以下命令来安装： ``` npm install --save nuxt axios ``` 接下来，我们需要配置Nuxt.js。我们可以在项目的根目录中创建一个`nuxt.config.js`文件来配置Nuxt.js。我们需要配置Nuxt.js的一些选项，例如页面路由、构建选项、插件等等。以下是一个简单的配置示例： ```javascript module.exports = { head: { title: 'CNode社区', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, ], }, modules: ['@nuxtjs/axios'], axios: { baseURL: 'https://cnodejs.org/api/v1', }, plugins: ['~/plugins/vue-markdown.js'], }; ``` 在上面的配置中，我们设置了页面标题，设置了meta标签，使用了`@nuxtjs/axios`模块来发送HTTP请求，设置了API的基本URL，以及添加了一个Vue插件来渲染Markdown。 接下来，我们需要创建页面。在Nuxt.js中，每个`.vue`文件都可以作为一个页面，它们位于`pages`目录中。我们可以创建一个名为`index.vue`的文件来显示CNode社区的帖子列表。以下是`index.vue`的示例代码： ```html <template> <div> <h1>CNode社区</h1> <ul> <li v-for="post in posts" :key="post.id"> <router-link :to="'/post/' + post.id">{{ post.title }}</router-link> </li> </ul> </div> </template> <script> export default { asyncData({ $axios }) { return $axios.get('/topics').then((res) => { return { posts: res.data.data }; }); }, }; </script> ``` 在上面的代码中，我们使用了Vue.js的`v-for`指令来遍历每个帖子，并使用Vue.js的`router-link`组件来呈现帖子标题和链接。我们还使用了Nuxt.js提供的`asyncData`方法来在服务器端获取帖子列表。在这个方法中，我们使用了`$axios`模块来发送HTTP请求，获取帖子列表数据，并将其存储在`posts`变量中。 最后，我们需要启动应用程序。可以使用以下命令来启动： ``` npm run dev ``` 这将启动一个本地服务器，可以在浏览器中访问`http://localhost:3000`来查看我们的应用程序。 总结一下，通过Nuxt.js和Vue SSR技术，我们可以快速创建一个CNode社区帖子列表的SSR应用程序。我们只需要简单地配置Nuxt.js，然后创建一个`.vue`文件作为页面，并使用`asyncData`方法来获取数据和渲染页面。 ### 回答2： Vue SSR服务端渲染是指在服务端将Vue组件渲染为HTML，然后将其发送给浏览器进行展示。这种技术的好处是可以提高页面的渲染速度和SEO友好性。 Nuxt.js是一个基于Vue.js的服务端渲染应用框架，它提供了很多方便的特性和工具，可以帮助我们快速开发和部署Vue SSR应用。 CNode社区是一个以Node.js为后端，Vue.js为前端的技术社区。我们可以使用Nuxt.js来打造CNode社区的SSR应用，从而提升用户体验和搜索引擎的收录。 首先，我们可以使用Nuxt.js的CLI工具来初始化一个新的项目，选择SSR模式。然后，我们可以根据CNode社区的需求，创建相应的页面组件，如首页、帖子详情页、用户个人中心等。 在创建这些页面组件的过程中，我们可以使用Nuxt.js提供的一些特性，如动态路由、全局组件等，来简化开发和提升复用性。 在每个页面组件中，我们可以通过asyncData方法来获取数据，并将其作为组件的属性进行渲染。这样，我们就可以在服务端获取数据并渲染好HTML，然后将其发送到浏览器进行展示。 为了提高页面的加载速度，我们可以使用Nuxt.js的代码拆分功能，将不同页面的代码拆分成多个小块，并按需加载。这样，用户只需要加载当前页面所需的代码，可以减少页面的加载时间。 最后，我们可以使用Nuxt.js的部署工具来快速部署CNode社区的SSR应用。Nuxt.js支持将应用打包成静态文件，并可以轻松地部署到各种服务器或服务商上。 总结来说，通过深入学习Vue SSR服务端渲染，借助Nuxt.js框架，我们可以有效地打造CNode社区的SSR应用，提升用户体验和搜索引擎的收录，从而更好地为用户提供技术交流和资源分享的平台。 ### 回答3： Vue SSR（服务端渲染）是一种将Vue应用程序在服务器端进行渲染的技术。通过使用服务器端渲染，可以将静态HTML页面返回给客户端浏览器，从而提高首次加载速度和搜索引擎的抓取能力。而Nuxt.js是一个基于Vue SSR的框架，提供了一整套开箱即用的功能以快速构建Vue SSR应用程序。 在使用Nuxt.js构建CNode社区时，我们可以深入学习Vue SSR服务端渲染的原理和技巧。首先，我们需要了解Nuxt.js提供的目录结构和配置文件，这些会帮助我们更好地组织和管理前端开发流程。接下来，我们需要学习如何使用Nuxt.js的路由系统和异步数据获取功能，这些能帮助我们实现动态的页面渲染和数据预取。 在深入学习Vue SSR服务端渲染时，我们还需要了解服务器端渲染的优势和限制。通过SSR，我们可以提供更好的搜索引擎优化和用户体验，但也需要注意应用程序中可能出现的问题，比如对于某些浏览器不支持的特性、第三方库的兼容性和性能方面的考虑等。 除此之外，为了更好地打造CNode社区，我们还需要学习如何使用Nuxt.js的插件系统和组件库，以及如何与后端API进行交互和数据处理。通过深入学习Vue SSR服务端渲染和使用Nuxt.js打造CNode社区，我们可以提升自己的前端开发技能，并且能够快速构建出高效、可扩展的Vue SSR应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶落风尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值