如何修改Nuxt生成HTML中的资源URL，适配本地直接浏览器打开？

Nuxt 3 配置方法 #

• 在项目根目录的nuxt.config.ts（或nuxt.config.js）中添加以下配置，核心是将app.baseURL设为空字符串或./，让资源引用变为相对路径：

export default defineNuxtConfig({
  app: {
    baseURL: '' // 也可设为 './'，两种配置都能生成不带开头斜杠的资源路径
  },
  nitro: {
    output: {
      publicDir: './dist' // 默认输出目录为dist，可按需调整
    }
  }
})

• 执行nuxi generate命令生成静态文件后，HTML中的资源引用会变为src="_nuxt/..."，本地直接打开HTML文件即可正常加载资源。

Nuxt 2 配置方法 #

• 在nuxt.config.js中开启静态目标并设置路由基础路径为空：

export default {
  target: 'static',
  router: {
    base: ''
  }
}

• 运行npm run generate生成静态文件后，资源路径会自动去掉开头的斜杠，满足本地直接打开的需求。

注意事项 #

• 生成后请保持_nuxt文件夹与HTML文件的同级关系，不要随意移动其中一方，否则会导致资源加载失败。
• 若之前有旧的生成文件或缓存，建议先删除.nuxt和输出目录（如dist），再重新执行生成命令，避免旧配置干扰。

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