如何配置NuxtJS构建来自定义文件路径且不修改router配置

你遇到的问题本质是混淆了路由前缀配置和静态资源加载路径配置：router.base 控制的是页面路由的根路径，修改为相对路径会直接破坏路由匹配，只需要单独修改静态资源的发布路径配置即可，无需调整router相关选项。

Nuxt2 配置方法 #

在 nuxt.config.js 中添加 build.publicPath 配置项，指定静态资源的相对加载路径：

export default {
  ssr: false,
  // 保持router.base为默认值或者你需要的路由根路径，不要改为./
  // router: {
  //   base: '/'
  // },
  build: {
    // 配置js、css等构建产物的加载路径为相对dist目录的路径
    publicPath: './_nuxt/'
  }
}

Nuxt3 配置方法 #

在 nuxt.config.ts 中修改 app.buildAssetsDir 配置项即可：

export default defineNuxtConfig({
  ssr: false,
  app: {
    // 不要修改app.baseURL避免影响路由匹配
    buildAssetsDir: './_nuxt/'
  }
})

字体资源路径适配 #

CSS 中 @font-face 的路径会自动跟随上面的公共路径配置做转换，无需手动修改源码中的字体路径，重新构建后会自动生成正确的相对路径。

修改完成后重新执行构建命令，生成的 index.html 中资源引用路径会自动变为相对路径格式，同时路由逻辑不受影响，不会出现页面找不到的报错。

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