# SASS ### 1、引入SASS ``` npm install -D sass ``` ### 2、配置文件目录 ``` // nuxt.config.ts export default defineNuxtConfig({ css: [ '~/assets/styles/global.scss' // 全局引入 scss 文件 ], vite: { css: { preprocessorOptions: { scss: { additionalData: ` @use "@/assets/styles/variables.scss" as *; ` } } } } }) ``` `additionalData` 可以注入 SCSS 变量或 mixin 到每个 `.vue` 样式块。推荐使用 `@use ... as *` 而不是 `@import`，因为 `@import` 会重复加载。注意路径 `@/assets/styles/variables.scss` 是相对于项目根目录。 ### 3、创建2个文件 ``` $main-color: #ff0000; $font-size: 16px; ``` ``` //定义全局样式 ``` 问题：如果用 ` ``` # 打包SSG 静态文件 1、配置文件 ``` import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ // 目标模式 ssr: true, // 或 false，根据你需求 nitro: { preset: 'static' // 告诉 Nuxt 使用静态输出 }, // 可选：路由生成规则 generate: { // 避免部分动态路由不生成 routes: [ '/about', '/contact', '/posts/1', '/posts/2' ] } }) ``` 2、打包 ``` npx nuxt generate//打包 npx serve dist //本地测试 ``` # Nuxt/i18n模块文档： ``` npx nuxi@latest module add @nuxtjs/i18n ``` ``` export default defineNuxtConfig({ modules: ['@nuxtjs/i18n'], i18n: { locales: [ { code: 'en', name: 'English', file: 'en.json' }, { code: 'nl', name: 'Nederlands', file: 'nl.json' } ], defaultLocale: 'zh', strategy: 'prefix_except_default', // zh 没有前缀，en 有前缀 lazy: true, // 按需加载语言文件 langDir: 'locales/', // 存放多语言文件的目录 }, }) ``` json文件存放位置：` /i18n/locales ` ``` ``` - 中文页面 URL：`https://www.xxx.com/aaa` - 英文页面 URL：`https://www.xxx.com/en/aaa` - 并且你可以用 `` 来跳转自动带语言前缀。 ## 什么时候选哪种？ - **对 SEO 有要求** → 推荐 URL 前缀方式（用 `@nuxtjs/i18n`） - **只是展示，不需要多语言 SEO** → 用 vue-i18n 动态切换就够了 ## 路由跳转方法 ``` ``` ``` //项目自动引入 const localeRoute = useLocaleRoute() const router=useRouter() function onClick() { const route = localeRoute({ name: 'user-profile', query: { foo: '1' } }) if (route) { return navigateTo(route.fullPath+ '/123') //带参数 //router.push({path:route.fullPath + '/123'}) } } ``` # SEO优化 ## 1、开启静态生成 (SSG) Nuxt4 支持自动预渲染动态路由，比如 `pages/blog/[slug].vue`，只要在 `nuxt.config.ts` 里指定：这样每篇文章都会有独立的静态 HTML。 ``` export default defineNuxtConfig({ nitro: { preset: 'static', // 确保生成纯静态站点 routes: ['/blog/article1', '/blog/article2'] // 预渲染 } }) ``` ## 2、设置 meta ，并每个页面单独设置 meta 在app.vue放一个统一的，然后再每个页面单独放一个 ``` useHead({ title:"你的官网标题", meta:[ { name: 'description', content: '一句话介绍你的产品/服务' }, { name: 'keywords', content: '关键词1, 关键词2, 关键词3' }, { property: 'og:title', content: '页面标题' }, { property: 'og:description', content: '页面描述' }, { property: 'og:type', content: 'website' }, { property: 'og:image', content: 'https://yourdomain.com/og.png?20250912' } ] }) //页面 useHead({ title:"xx页面-xxx", }) ``` ##### og:image:一张1200*630的图片这个配置是用来设置 **Open Graph 协议 (OG)** 的图片，主要作用是：当别人分享你的网站（或页面）到社交平台（微信、QQ、Facebook、Twitter、LinkedIn 等），平台会读取你页面的 ``，并把这张图片作为**预览封面图**显示出来 **图片尺寸**：最好是 1200×630（或 1.91:1 比例），保证清晰度。 **路径必须是绝对路径**：推荐写成完整网址，否则有些平台（如微信、Twitter）识别不了图片 URL 是一个稳定且绝对路径，并带有版本号或类似 timestamp（例子里 URL 后面有类似 `?201610171354` 的部分），方便缓存刷新或内容更新时客户端能获取新的图 ## 3、站点地图 @nuxtjs/sitemap 文档：安装 ``` npx nuxi module add @nuxtjs/sitemap ``` 配置 ``` export default defineNuxtConfig( site: { url: 'https://example.com', //网站地址 name: 'My Awesome Website' //名称 }, }) ``` 安装 nuxt-simple-sitemap ，配置了也没有自动生成，所以不用 nuxt-simple-sitemap ## 4、robots 告诉搜索引擎哪些能爬：文档： ``` npx nuxi module add robots ``` 安装完不需要配置，nuxt.config.ts自动生成modules ``` export default defineNuxtConfig( modules: ['@nuxtjs/sitemap','@nuxtjs/robots'] }) ``` 保证这两个都存在之后 npx nuxi generate 生成静态文件，在public文件里里面会自动生成 sitemap_index.xml和robots.txt两个文件 ## 5、Schema.org JSON-LD **结构化数据 (Schema.org)** 结构化数据是一种用 **机器可读的格式**（通常是 JSON-LD）标注网页信息的方式。搜索引擎（Google、Bing、百度等）会读取这些信息，用于： - 丰富搜索结果（Rich Snippets），比如显示公司 logo、评价、联系方式等 - 提高 **SEO** 可见性和识别准确度 - 在搜索结果里更容易展示品牌信息 Nuxt 里可以用 `useHead` 注入到 `` 里。可以放在 **默认布局**，让所有页面都生效。例如在 `layouts/default.vue` ``` useHead({ script: [ { type: 'application/ld+json', innerHTML: JSON.stringify({ "@context": "https://schema.org",//固定不需要改 "@type": "Organization",//固定不需要改 "name": "名称", "url": "https://www.xxx.com",//官网地址 "logo": "https://www.xxx.com/logo.png"//logo的网络地址 }) } ] }) ``` 网页里会生成一个标签 ``` ... ... ``` ## 6、图片添加alt属性 # 问题BUG ### 1、使用自定义指令报错SSR错误这个错误最可能的原因之一，是项目中使用了自定义 Vue 指令，但这个指令没有在 Nuxt 3 中正确实现或兼容，导致服务端渲染 (SSR) 时出现问题。正如一处搜索结果中提到，在 Vue 3 迁移到 Nuxt 3 时，一个自定义指令没有搬过来，但组件中又使用了它，就可能导致此类错误，并且可能使得页面 HTML 结构未被正确解析。 - **检查指令定义**：首先全局搜索你的项目源代码，查找 `directive`、`directives` 或你怀疑的特定指令名称（例如 `v-top`）。确认这些指令是否在 Nuxt 3 的插件 (`~/plugins/`目录) 或组件中正确定义。 - **确保指令兼容 SSR**：自定义指令中的代码**不能在服务端渲染阶段访问浏览器特有的 API**（如 `window`, `document`, `alert` 等）。你需要确保指令的逻辑要么仅在客户端运行，要么在调用浏览器 API 前进行环境判断。解决办法：如果不使用SSR的话，在nuxt.config.ts中关掉SSR：false ### 2、引用swiper库无法获取实例对象官方文档：使用useSwiper()钩子获取不到替代方法： ``` const mySwiper = ref(null) // 获取swiper属性 mySwiper.value?.$el.swiper mySwiper.value?.$el.swiper.slideNext() ```

{{ $t('welcome') }}