nuxt3项目创建

安装npx nuxilatest init project-name此时会出现报错需要在host文件中加入185.199.108.133 raw.githubusercontent.com再次执行命令进入安装此处选择npm出现下图表示安装成功启动项目执行npm run dev访问http://localhost:3000/出现下入界面删除app.vue页面内容页面底部会出现一个按钮找到nuxt.config.ts文件将属性设为false即可语法介绍1、配置layouts新建Header和Footer组件新建layouts文件夹新建global.vue内容如下使用布局新建pages文件夹新建about页面效果可以实现菜单切换2、添加element-plusnpm install element-plusnpm install element-plus/nuxtnuxt.config.ts文件中添加两行代码3、添加scss使用变量npm install sass新建assets文件夹新建styles文件夹新建common.scss文件加入变量nuxt.config.ts文件中添加几行代码即可使用4、动态TDK与SEO优化Nuxt 3完整配置指南在 Nuxt 3 中SEO搜索引擎优化是提升网站流量和排名的关键环节。通过useSeoMeta和useHead组合可以动态设置页面的 TDKTitle、Description、Keywords以及适配谷歌、百度等主流搜索引擎的元标签。良好的 SEO 配置不仅能提高搜索引擎收录效率还能改善社交分享展示效果。4.1 基础 SEO 配置使用useSeoMeta可以方便地设置常见的 SEO 元标签const num Math.random() useSeoMeta({ title: 首页 num, ogTitle: 我的神奇网站, description: 这是我的神奇网站让我来告诉你关于它的一切。, ogDescription: 这是我的神奇网站让我来告诉你关于它的一切。, ogImage: https://example.com/image.png, twitterCard: summary_large_image, })4.2 谷歌搜索引擎配置谷歌主要关注 Open Graph 和 Twitter Card 标签同时还有一些特定的元标签useHead({ meta: [ // 谷歌专用标签 { name: google-site-verification, content: your-google-verification-code }, { name: googlebot, content: index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1 }, { name: robots, content: index, follow }, // 结构化数据标记推荐 { name: application-name, content: 我的网站 }, { name: mobile-web-app-capable, content: yes }, // 移动端优化 { name: viewport, content: widthdevice-width, initial-scale1.0 }, { name: theme-color, content: #ffffff }, ], link: [ // 规范链接防止重复内容 { rel: canonical, href: https://your-domain.com/current-page }, // 移动端图标 { rel: icon, type: image/x-icon, href: /favicon.ico }, { rel: apple-touch-icon, href: /apple-touch-icon.png }, ], script: [ // 谷歌分析如果需要 { innerHTML: window.dataLayer window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(js, new Date()); gtag(config, YOUR-GA4-ID); , type: text/javascript } ] })4.3 百度搜索引擎配置百度有自己的一套 SEO 规范需要单独配置useHead({ meta: [ // 百度专用标签 { name: baidu-site-verification, content: your-baidu-verification-code }, { name: baiduspider, content: index,follow }, // 百度移动适配 { name: mobile-agent, content: formathtml5; urlhttps://m.your-domain.com/current-page }, // 百度禁止转码防止百度转码破坏页面样式 { http-equiv: Cache-Control, content: no-transform }, { http-equiv: Cache-Control, content: no-siteapp }, // 百度搜索结果显示配置 { name: applicable-device, content: pc,mobile }, { name: renderer, content: webkit }, ], link: [ // 百度移动适配链接 { rel: alternate, media: only screen and (max-width: 640px), href: https://m.your-domain.com/current-page }, // 百度搜索资源平台验证 { rel: search, type: application/opensearchdescriptionxml, title: 站内搜索, href: /opensearch.xml }, ], script: [ // 百度统计 { innerHTML: var _hmt _hmt || []; (function() { var hm document.createElement(script); hm.src https://hm.baidu.com/hm.js?your-baidu-tongji-id; var s document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(hm, s); })(); , type: text/javascript }, // 百度自动推送 { innerHTML: (function(){ var bp document.createElement(script); var curProtocol window.location.protocol.split(:)[0]; if (curProtocol https) { bp.src https://zz.bdstatic.com/linksubmit/push.js; } else { bp.src http://push.zhanzhang.baidu.com/push.js; } var s document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(bp, s); })(); , type: text/javascript } ] })4.4 完整的 SEO 配置示例结合谷歌和百度的配置创建一个完整的 SEO 配置组件template div !-- 页面内容 -- /div /template script setup langts import { useSeoMeta, useHead } from #imports // 动态数据 const pageTitle ref(首页) const pageDescription ref(这是我的神奇网站描述) const pageKeywords ref(Nuxt3, SEO, 谷歌, 百度, 动态TDK) // 基础 SEO 配置 useSeoMeta({ title: pageTitle.value, description: pageDescription.value, keywords: pageKeywords.value, ogTitle: pageTitle.value, ogDescription: pageDescription.value, ogImage: https://example.com/og-image.jpg, twitterCard: summary_large_image, twitterTitle: pageTitle.value, twitterDescription: pageDescription.value, twitterImage: https://example.com/twitter-image.jpg, }) // 谷歌搜索引擎配置 useHead({ meta: [ { name: google-site-verification, content: your-google-code }, { name: googlebot, content: index, follow, max-snippet:-1, max-image-preview:large }, { name: robots, content: index, follow }, { name: viewport, content: widthdevice-width, initial-scale1.0 }, ], link: [ { rel: canonical, href: https://your-domain.com useRoute().path }, ], }) // 百度搜索引擎配置 useHead({ meta: [ { name: baidu-site-verification, content: your-baidu-code }, { name: baiduspider, content: index,follow }, { http-equiv: Cache-Control, content: no-transform }, { http-equiv: Cache-Control, content: no-siteapp }, ], }) // 监听路由变化更新 SEO watch(() useRoute().path, (newPath) { // 根据路由动态更新 TDK pageTitle.value getTitleByRoute(newPath) pageDescription.value getDescriptionByRoute(newPath) pageKeywords.value getKeywordsByRoute(newPath) // 更新 canonical 链接 useHead({ link: [ { rel: canonical, href: https://your-domain.com newPath }, ], }) }) // 工具函数 function getTitleByRoute(path: string): string { const titles: Recordstring, string { /: 首页 - 我的网站, /about: 关于我们 - 我的网站, /contact: 联系我们 - 我的网站, } return titles[path] || 我的网站 } function getDescriptionByRoute(path: string): string { // 根据路由返回不同的描述 return 页面描述${path} } function getKeywordsByRoute(path: string): string { // 根据路由返回不同的关键词 return 关键词1, 关键词2, ${path} } /script4.5 添加 JSON-LD 结构化数据结构化数据Structured Data使用 JSON-LD 格式可以帮助搜索引擎更好地理解页面内容并在搜索结果中展示富媒体片段Rich Snippets如面包屑导航、评分、FAQ 等。// 在页面组件中添加结构化数据 useHead({ script: [ { type: application/ldjson, innerHTML: JSON.stringify({ context: https://schema.org, type: WebPage, name: pageTitle.value, description: pageDescription.value, url: https://your-domain.com useRoute().path, breadcrumb: { type: BreadcrumbList, itemListElement: [ { type: ListItem, position: 1, name: 首页, item: https://your-domain.com/ }, { type: ListItem, position: 2, name: pageTitle.value, item: https://your-domain.com useRoute().path } ] } }) } ] })4.6 配置 Sitemap 与 Robots.txt在 Nuxt 3 中可以使用nuxtjs/sitemap模块自动生成站点地图并在public/robots.txt中配置爬虫访问规则# 安装 sitemap 模块 npm install nuxtjs/sitemap// nuxt.config.ts export default defineNuxtConfig({ modules: [nuxtjs/sitemap], sitemap: { hostname: https://your-domain.com, gzip: true, exclude: [/admin/**, /login, /register], routes: async () { // 从 API 或数据库动态获取所有页面路由 const pages await fetch(https://api.your-domain.com/pages).then(res res.json()) return pages.map(page ({ url: /page/${page.slug}, changefreq: weekly, priority: 0.8, lastmod: page.updatedAt })) } } })# public/robots.txt User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Disallow: /_nuxt/ Sitemap: https://your-domain.com/sitemap.xml4.7 注意事项与最佳实践验证码获取谷歌验证码在 Google Search Console 中获取百度验证码在百度搜索资源平台中获取移动端适配确保网站在移动设备上显示正常这对 SEO 很重要。使用响应式设计并测试移动端体验。页面加载速度优化图片使用 WebP 格式、压缩代码开启 Nuxt 3 的 gzip/brotli、启用 CDN 加速提高页面加载速度。Core Web Vitals 是谷歌排名的重要因素。结构化数据使用 JSON-LD 添加结构化数据如面包屑、FAQ、产品信息提升搜索结果显示效果增加点击率。定期检查使用谷歌 Search Console 和百度搜索资源平台定期检查 SEO 状态修复索引错误和爬取异常。避免重复内容为每个页面设置唯一的canonical链接防止搜索引擎因重复内容降低权重。图片优化为所有img标签添加alt属性描述使用有意义的文件名如nuxt3-seo-guide.png而非img001.png。社交分享优化为每个页面设置独立的og:image和og:title提升在微信、微博、Twitter、Facebook 等平台的分享展示效果。通过以上配置可以同时满足谷歌和百度搜索引擎的 SEO 要求提升网站在两个搜索引擎中的排名和展示效果。建议在项目初期就建立完善的 SEO 体系避免后期大规模返工。查看网址收录情况在对应搜索引擎输入site:你的域名回车即可查看5、添加请求axiosnpm install axios新建api文件夹新建request.js文件其余用法与vue一样无需配置代理import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL:http://192.168.0.102:48080,//本地使用 }) request.interceptors.request.use( config { const token Bearer c4322eded85c4c2a80b56095fdf1b6ac //登录后获取token if(token){ config.headers.authorization ${token} } return config }, err { return Promise.reject(err) } ) request.interceptors.response.use( response { if (response.data.code ! 0) { return Promise.reject(response.data) } else { return response.data } }, error { // console.log(error:, error) if(error.response){ ElMessage({ message: 请求错误请求服务器无响应, type: error, duration: 2000 //提示持续2秒 }) } return Promise.reject(error.response) } ) export default request6、路由默认根据页面层级结构决定path嵌套路由比如user文件夹包含list.vue该页面路由就是/user/list使用definePageMeta修改页面路由//定义页面路由 definePageMeta({ path:/user-list })修改后访问/user/list则为404动态路由pages目录下新建user文件夹新建[id].vue// [id].vue template div动态路由/div /template script setup langts const route useRoute() console.log(route.params.id) /script style scoped /style访问路径http://localhost:3000/user/1输入值为17、路由中间件页面中添加下面代码definePageMeta({ // middleware(to, from) { // console.log(匿名中间件只在当前页面使用,to,from); // }, middleware: [router] })新建文件夹middleware新建router.js//router.js export default defineNuxtRouteMiddleware((to, from) { console.log(to,from) })即可获取路由相关信息重新命名router.js为router.global.js即为全局中间件页面中无需引入即可执行可以用于权限判断路由重定向export default defineNuxtRouteMiddleware((to, from) { console.log(to,from) if(to.path/){ return navigateTo(/login) } })return abortNavigation(); // 停止导航8、错误页面处理根目录下新建error.vue//error.vue template div h1发生错误/h1 p抱歉页面无法加载。/p p错误代码{{ error.statusCode }}/p /div /template script export default { props: [error], } /script展示效果9、多语言Nuxt 3 内置了nuxtjs/i18n模块可轻松实现国际化。安装与配置安装模块npm install nuxtjs/i18n在nuxt.config.ts中添加配置// nuxt.config.ts export default defineNuxtConfig({ modules: [nuxtjs/i18n], i18n: { locales: [ { code: en, name: English }, { code: zh, name: 中文 } ], defaultLocale: zh, strategy: prefix_except_default, vueI18n: ./i18n.config.ts } })创建语言文件推荐将语言消息单独提取到独立的文件中便于维护和管理。方法一使用 JSON 文件推荐1. 在项目根目录创建locales文件夹2. 在locales文件夹中创建语言文件locales/en.json{ welcome: Welcome, home: Home, about: About, switch: Switch Language }locales/zh.json{ welcome: 欢迎, home: 首页, about: 关于, switch: 切换语言 }3. 修改i18n.config.ts配置文件// i18n.config.ts import en from ./locales/en.json import zh from ./locales/zh.json export default defineI18nConfig(() ({ legacy: false, locale: zh, messages: { en, zh } }))方法二使用 JavaScript/TypeScript 文件1. 在项目根目录创建locales文件夹2. 在locales文件夹中创建语言文件locales/en.ts// locales/en.ts export default { welcome: Welcome, home: Home, about: About, switch: Switch Language }locales/zh.ts// locales/zh.ts export default { welcome: 欢迎, home: 首页, about: 关于, switch: 切换语言 }3. 修改i18n.config.ts配置文件// i18n.config.ts import en from ./locales/en import zh from ./locales/zh export default defineI18nConfig(() ({ legacy: false, locale: zh, messages: { en, zh } }))方法对比同步加载 vs 异步加载为了更清晰地理解三种方法的区别这里做一个对比说明特性方法一JSON 文件方法二JS/TS 文件方法三异步加载文件位置locales/en.json, locales/zh.jsonlocales/en.ts, locales/zh.tslocales/en.json, locales/zh.json加载方式同步导入构建时打包同步导入构建时打包异步加载运行时按需构建体积所有语言文件都打包到主包所有语言文件都打包到主包只打包默认语言其他语言按需加载适用场景小型项目语言内容少小型项目需要类型支持大型项目多语言内容多配置差异messages: { en, zh }messages: { en, zh }lazy: truelangDir性能影响初始加载稍慢包含所有语言初始加载稍慢包含所有语言初始加载快切换语言时有网络请求关键区别方法一和方法二都是同步加载所有语言文件在应用启动时就全部加载到内存中。方法三是异步加载懒加载只有当前语言的文件在启动时加载其他语言文件在需要时才动态加载。简单来说方法一和方法二的文件结构看起来相似但方法三的配置方式完全不同需要设置lazy: true这决定了它们的加载行为有本质区别。方法三使用异步加载适用于大型项目当项目规模较大、语言文件内容较多时同步加载所有语言文件可能会影响应用的初始加载性能。此时可以使用异步加载懒加载方式按需加载语言文件。异步加载的优势减少初始包体积应用启动时只加载当前语言的文件提升加载速度避免一次性加载所有语言文件造成的延迟更好的用户体验用户切换语言时才加载对应语言文件便于维护大型项目可以按模块拆分语言文件配置异步加载在i18n.config.ts中启用lazy选项// i18n.config.ts export default defineI18nConfig(() ({ legacy: false, locale: zh, // 默认语言 lazy: true, // 启用异步加载 langDir: locales/, // 语言文件目录 locales: [ { code: en, // 语言代码 name: English, // 显示名称 file: en.json // 对应的语言文件 }, { code: zh, name: 中文, file: zh.json }, { code: ja, name: 日本語, file: ja.json } ] }))语言文件结构语言文件需要放在locales/目录下文件名与locales配置中的file字段对应项目根目录/ ├── locales/ │ ├── en.json # 英文语言文件 │ ├── zh.json # 中文语言文件 │ └── ja.json # 日文语言文件 ├── i18n.config.ts └── nuxt.config.ts异步加载的工作原理初始加载应用启动时只加载默认语言locale: zh对应的zh.json文件语言切换当用户切换到英文时动态加载en.json文件缓存机制已加载的语言文件会被缓存避免重复请求错误处理如果语言文件加载失败会回退到默认语言高级配置按模块拆分语言文件对于超大型项目可以按功能模块拆分语言文件// i18n.config.ts export default defineI18nConfig(() ({ legacy: false, locale: zh, lazy: true, langDir: locales/, locales: [ { code: en, name: English, file: en.json }, { code: zh, name: 中文, file: zh.json } ], // 自定义异步加载逻辑 loadLanguagesAsync: true, // 可以配置自定义的加载器 // customLoader: async (lang, namespace) { // // 自定义加载逻辑 // return await import(./locales/${lang}/${namespace}.json) // } }))按模块拆分文件结构locales/ ├── en/ │ ├── common.json # 公共词汇 │ ├── dashboard.json # 仪表板模块 │ ├── user.json # 用户模块 │ └── settings.json # 设置模块 └── zh/ ├── common.json ├── dashboard.json ├── user.json └── settings.json性能优化建议代码分割结合 Nuxt 3 的自动代码分割功能预加载可以预加载用户可能使用的语言文件压缩优化使用 JSON 压缩工具减少文件体积CDN 部署将语言文件部署到 CDN 加速加载注意事项文件命名语言文件名必须与locales配置中的file字段完全一致路径配置langDir路径是相对于项目根目录的文件格式支持 JSON、JavaScript、TypeScript 格式热更新开发环境下修改语言文件会自动热更新SEO 考虑服务端渲染时确保当前语言文件已加载完成示例异步加载的实际效果// 在组件中切换语言时 const { locale } useI18n() // 切换到英文 - 此时会异步加载 en.json const switchToEnglish async () { locale.value en // 加载完成后$t() 会自动使用新的翻译 } // 检查语言是否已加载 const { t, te } useI18n() console.log(te(welcome)) // 检查 welcome 键是否存在调试技巧在浏览器开发者工具的 Network 面板中可以观察到语言文件的异步加载请求帮助理解异步加载的工作机制。在组件中使用template div h1{{ $t(welcome) }}/h1 button clickswitchLocale{{ $t(switch) }}/button /div /template script setup langts const { locale, locales } useI18n() const switchLocale () { locale.value locale.value en ? zh : en } /script通过useI18n()可获取当前语言、切换语言$t()用于翻译文本。10、环境配置文件变量读取Nuxt 3 提供了多种方式来读取环境变量包括运行时环境变量和构建时环境变量。10.1 环境配置文件在项目根目录下创建以下文件来管理不同环境的环境变量.env- 所有环境的默认变量.env.development- 开发环境变量.env.production- 生产环境变量.env.local- 本地覆盖变量10.2 环境变量命名规范环境变量需要以NUXT_PUBLIC_或NUXT_为前缀# .env NUXT_PUBLIC_API_BASE_URLhttp://localhost:3000/api NUXT_PUBLIC_SITE_NAME我的Nuxt应用 NUXT_API_SECRET_KEYyour-secret-key-here10.3 在代码中读取环境变量使用useRuntimeConfig和useAppConfig来读取配置10.3.1 使用 useRuntimeConfig// 在组件或组合式函数中 const config useRuntimeConfig() // 读取公共变量客户端和服务端都可访问 console.log(config.public.apiBaseUrl) // http://localhost:3000/api console.log(config.public.siteName) // 我的Nuxt应用 // 读取私有变量仅在服务端可访问 // console.log(config.apiSecretKey) // 仅在服务端可用10.3.2 在 nuxt.config.ts 中配置// nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // 公共变量客户端和服务端都可访问 public: { apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || http://localhost:3000/api, siteName: process.env.NUXT_PUBLIC_SITE_NAME || Nuxt App }, // 私有变量仅在服务端可访问 apiSecretKey: process.env.NUXT_API_SECRET_KEY || default-secret } })10.4 在 API 路由中使用环境变量// server/api/test.get.ts export default defineEventHandler(async (event) { const config useRuntimeConfig() // 访问私有环境变量仅在服务端 const secretKey config.apiSecretKey return { message: API 路由测试, publicUrl: config.public.apiBaseUrl, timestamp: new Date().toISOString() } })其余待完善。。。