如何在Nuxt3中通过nuxt.config.ts在head加载static文件夹资源？

架构老林

2026-7-20

问题原因及解决方案

核心问题有两个：Nuxt 3 静态资源目录的变更，以及路径别名在浏览器端的不可用性。

1. 静态资源目录搞错了

Nuxt 3 已废弃旧的static文件夹，统一使用public作为静态资源存放目录。你现在把CSS文件放在static/css下，Nuxt 3 不会识别该目录下的资源，导致访问/css/css-dev.css时找不到文件，最终返回首页（Nuxt的404 fallback逻辑）。

2. 路径别名不能用在浏览器URL里

@/、~/是Nuxt内部的模块导入别名，仅能在代码（如组件、配置文件的模块导入）中使用，浏览器无法解析这些别名。所以在head的link标签href里写这些路径，只会被浏览器当作普通字符串处理，自然找不到资源。

解决步骤

第一步：修改静态资源目录

把项目根目录下的static文件夹改名为public，结构变为：

项目根目录
└── public
    └── css
        └── css-dev.css

第二步：修正资源路径

不管是在nuxt.config.ts还是useHead中，都使用相对于网站根目录的绝对路径：

在`nuxt.config.ts`中：

export default defineNuxtConfig({
  // 若不需要内嵌CSS，可删除此行
  // css: ['@/public/css/css-dev.css'],
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: '/css/css-dev.css' }
      ]
    }
  }
})

在组件（如`app.vue`、`index.vue`）中使用`useHead`：

export default {
  setup() {
    useHead({
      link: [
        { rel: 'stylesheet', href: '/css/css-dev.css' }
      ],
      meta: [
        // 示例：加载og图，假设public/images下有该文件
        { property: 'og:image', content: '/images/og-image.jpg' }
      ]
    })
  },
}