nuxt4制作企业官网

#SASS

#1、引入SASS

复制npm install -D sass

#2、配置文件目录

复制
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;

问题：

如果用 <style scoped> ，变量仍然可以访问，但 mixin 和函数也要全局注入。

不要在 global.scss 里再 @use 自己的 variables.scss，会出现循环依赖。

不能在global.scss写预设变量，会报错

additionalData 也可以直接写变量，而不通过单独文件：

#4、使用

复制<template>
  <div class="demo">Hello Nuxt4</div>
</template>

<style lang="scss" scoped>
.demo {
  color: $main-color;
  font-size: $font-size;
}
</style>

#打包SSG 静态文件

1、配置文件

复制import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  
  ssr: true, 
  nitro: {
    preset: 'static' 
  },
  
  generate: {
    
    routes: [
      '/about',
      '/contact',
      '/posts/1',
      '/posts/2'
    ]
  }
})

2、打包

复制npx nuxt generate

npx serve dist 

#Nuxt/i18n模块

文档：i18n.nuxtjs.org/docs/gettin…

复制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文件存放位置： <rootDir>/i18n/locales

复制<script setup>
const { locales, setLocale } = useI18n()
</script>

<template>
  <div>
    <button v-for="locale in locales" @click="setLocale(locale.code)">
      {{ locale.name }}
    </button>
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>

• 中文页面 URL：https://www.xxx.com/aaa
• 英文页面 URL：https://www.xxx.com/en/aaa
• 并且你可以用 <NuxtLink locale="en"> 来跳转自动带语言前缀。

#什么时候选哪种？

• 对 SEO 有要求 → 推荐 URL 前缀方式（用 @nuxtjs/i18n）
• 只是展示，不需要多语言 SEO → 用 vue-i18n 动态切换就够了

#路由跳转方法

复制<template>
  <NuxtLink :to="$localePath('index')">{{ $t('home') }}</NuxtLink>
  <NuxtLink :to="$localePath('index', 'en')">Homepage in English</NuxtLink>
  <NuxtLink :to="$localePath('user-profile')">Route to {{ $t('profile') }}</NuxtLink>
  <NuxtLink :to="$localePath({ name: 'category-slug', params: { slug: category.slug } })">
    {{ category.title }}
  </NuxtLink>
</template>

复制
const localeRoute = useLocaleRoute()
const router=useRouter()
function onClick() {
  const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
  if (route) {
    return navigateTo(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 等），
平台会读取你页面的 <meta property="og:image" ...>，并把这张图片作为预览封面图显示出来

图片尺寸：最好是 1200×630（或 1.91:1 比例），保证清晰度。

路径必须是绝对路径：推荐写成完整网址，否则有些平台（如微信、Twitter）识别不了

图片 URL 是一个稳定且绝对路径，并带有版本号或类似 timestamp（例子里 URL 后面有类似 ?201610171354 的部分），方便缓存刷新或内容更新时客户端能获取新的图

#3、站点地图 @nuxtjs/sitemap

文档：nuxtseo.com/docs/sitema…

安装

复制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

告诉搜索引擎哪些能爬：

文档：nuxtseo.com/docs/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 注入到 <head> 里。

可以放在 默认布局，让所有页面都生效。

例如在 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"
      })
    }
  ]
})

网页里会生成一个标签

复制<head>
  ...
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "xxx",
      "url": "https://www.xxx.com",
      "logo": "https://www.xxx.com/logo.png"
    }
  </script>
  ...
</head>

#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库无法获取实例对象

官方文档：swiperjs.com/vue#useswip…
使用useSwiper()钩子获取不到
替代方法：

复制const mySwiper = ref<null | HTMLElement>(null)

mySwiper.value?.$el.swiper
mySwiper.value?.$el.swiper.slideNext()