NUXT4.js制作企业官网

SASS

1、引入SASS

复制代码

npm install -D sass

2、配置文件目录

php 复制代码

// 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个文件

css 复制代码

$main-color: #ff0000;
$font-size: 16px;

arduino 复制代码

//定义全局样式

问题：

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

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

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

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

4、使用

xml 复制代码

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

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

打包SSG 静态文件

1、配置文件

javascript 复制代码

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // 目标模式
  ssr: true, // 或 false，根据你需求
  nitro: {
    preset: 'static' // 告诉 Nuxt 使用静态输出
  },
  // 可选：路由生成规则
  generate: {
    // 避免部分动态路由不生成
    routes: [
      '/about',
      '/contact',
      '/posts/1',
      '/posts/2'
    ]
  }
})

2、打包

arduino 复制代码

npx nuxt generate//打包

npx serve dist //本地测试

Nuxt/i18n模块

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

sql 复制代码

npx nuxi@latest module add @nuxtjs/i18n

php 复制代码

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

xml 复制代码

<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 动态切换就够了

路由跳转方法

ini 复制代码

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

php 复制代码

//项目自动引入
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。

arduino 复制代码

export default defineNuxtConfig({
  nitro: {
    preset: 'static', // 确保生成纯静态站点
    routes: ['/blog/article1', '/blog/article2'] // 预渲染
  }
})

2、设置 meta ，并每个页面单独设置 meta

在app.vue放一个统一的，然后再每个页面单独放一个

php 复制代码

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...

安装

sql 复制代码

npx nuxi module add @nuxtjs/sitemap

配置

arduino 复制代码

export default defineNuxtConfig(
 site: { 
 url: 'https://example.com', //网站地址
 name: 'My Awesome Website' //名称
 }, 
})

安装 nuxt-simple-sitemap ，配置了也没有自动生成，所以不用 nuxt-simple-sitemap

4、robots

告诉搜索引擎哪些能爬：

文档：nuxtseo.com/docs/robots...

sql 复制代码

npx nuxi module add robots

安装完不需要配置，nuxt.config.ts自动生成modules

arduino 复制代码

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

go 复制代码

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的网络地址
      })
    }
  ]
})

网页里会生成一个标签

xml 复制代码

<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()钩子获取不到

替代方法：

php 复制代码

const mySwiper = ref<null | HTMLElement>(null)
// 获取swiper属性
mySwiper.value?.$el.swiper
mySwiper.value?.$el.swiper.slideNext()

NUXT4.js制作企业官网

SASS

1、引入SASS

2、配置文件目录

3、创建2个文件

4、使用

打包SSG 静态文件

Nuxt/i18n模块

什么时候选哪种？

路由跳转方法

SEO优化

1、 开启静态生成 (SSG)

2、设置 meta ，并每个页面单独设置 meta

og:image:一张1200*630的图片

3、站点地图 @nuxtjs/sitemap

4、robots

5、Schema.org JSON-LD 结构化数据 (Schema.org)

6、图片添加alt属性

问题BUG

1、使用自定义指令报错SSR错误

2、引用swiper库无法获取实例对象

1、开启静态生成 (SSG)