部署Nuxt静态应用时子路由CSS、JS资源路径错误如何解决？

问题根因 #

你在nuxt.config.js的head.link配置中使用了相对路径引入静态资源（如css/bootstrap.css），相对路径会基于当前页面的URL路径解析：

• 首页路径为/时，解析后的路径是/css/bootstrap.css，可以正常访问
• 子路由路径为/preguntasFrecuentes时，解析后的路径会自动拼接路由前缀，变成/preguntasFrecuentes/css/bootstrap.css，导致资源找不到
  本地npm run dev正常是因为Nuxt开发模式内置了路径兼容逻辑，生产构建后该兼容逻辑会被移除，因此会暴露路径错误。

修复步骤 #

1. 调整静态资源存放位置
   将项目根目录下的css、js、images三个文件夹整体移动到static目录下。Nuxt的static目录下的所有资源会在构建时原样复制到产物根路径，才能通过根路径绝对地址访问。
2. 修改nuxt.config.js中的资源路径为绝对路径
   将head.link中所有本地静态资源的href开头添加/，改成根路径绝对路径，修改后的配置示例如下：

link: [
  { href: '/css/bootstrap.css', rel: 'stylesheet' },
  { href: '/css/style.css', rel: 'stylesheet' },
  { href: '/css/responsive.css', rel: 'stylesheet' },
  { href: 'https://fonts.googleapis.com/css?family=Barlow Semi Condensed', rel: 'stylesheet' },
  { href: '/css/color-switcher-design.css', rel: 'stylesheet' },
  { rel: 'shortcut icon', href: '/images/icono.png', type: 'image/x-icon' },
  { rel: 'icon', href: '/images/icono.png', type: 'image/x-icon' },
],

3. 重新构建测试
   修改完成后重新执行npm run generate构建静态包，再执行npm run start或部署到S3即可正常加载资源。

可选优化 #

如果你不需要手动管理静态资源的引入，更推荐将CSS文件放入assets/css目录，在nuxt.config.js中通过css配置项引入，Nuxt会自动处理资源路径、压缩、哈希戳等逻辑，避免手动配置路径出错：

export default {
  // 其余配置保持不变
  css: [
    '~/assets/css/bootstrap.css',
    '~/assets/css/style.css',
    '~/assets/css/responsive.css',
    '~/assets/css/color-switcher-design.css'
  ]
}

使用该方式后可以把head.link中对应的本地CSS引入项删除。

内容的提问来源于stack exchange，提问作者Rene Gutierrez Rodriguez