如何让Nuxt 3解析CSS中的资源URL？（Nuxt 2迁移场景）

核心问题 #

Nuxt 3 不再兼容 Nuxt 2 中 ~assets 这种省略斜杠的资源路径写法，导致构建工具无法正确识别并处理资源。

解决步骤 #

1. 修正资源路径前缀
   将原代码中的 ~assets 替换为 ~/assets，确保路径指向项目根目录下的 assets 文件夹：

   background: url('~/assets/images/main-hero.webp') #4fcf8d no-repeat;
   

2. 确认资源处理配置
   检查 nuxt.config.ts 中是否正确配置了资源处理相关选项，确保 assets 目录下的资源能被构建工具（Vite/Webpack）正确解析和优化：

   export default defineNuxtConfig({
     // 确保全局样式文件已正确引入
     css: ['~/assets/css/your-global-styles.css'],
     // 可选：明确指定要处理的资源类型，避免遗漏
     vite: {
       assetsInclude: ['**/*.webp']
     }
   })
   

3. SCSS 环境下的检查
   如果使用 SCSS，无需额外配置自定义路径别名，直接使用修正后的 ~/assets 路径即可——Nuxt 3 已默认配置 ~ 指向项目根目录，不会出现路径解析冲突。

完成以上修改后，构建项目时，Nuxt 3 会自动将资源处理为带哈希的目标格式（如 /_nuxt/img/7611483.webp）。

内容的提问来源于stack exchange，提问作者JoshKisb