Nuxt 3中为public目录URL加尾斜杠解决资源加载问题

问题根源 #

访问sitename.com/urlName时，浏览器会将urlName识别为文件名而非目录名。此时页面内相对路径的资源（比如./style.css）会被解析为sitename.com/style.css，而非正确的sitename.com/urlName/style.css，导致资源加载失败。加上尾斜杠后，浏览器明确urlName是目录，资源路径解析正常。

可行解决方案 #

1. 用Nuxt3路由规则重定向（推荐） #

直接在nuxt.config.ts中配置Nitro路由规则，自动将不带尾斜杠的请求重定向到带尾斜杠的地址：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/urlName': { redirect: '/urlName/' }
    }
  }
})

这个方案适配所有Nuxt3支持的部署环境（开发服务器、Vercel、Netlify等），比.htaccess更通用——很多现代托管平台不支持.htaccess。

2. 修正.htaccess规则（仅Apache服务器适用） #

如果部署环境是Apache，确保.htaccess放在项目根目录（不是public目录），并添加以下规则：

RewriteEngine On
RewriteRule ^urlName$ /urlName/ [R=301,L]

之前规则无效大概率是因为.htaccess位置错误，或者服务器未启用Rewrite模块。

3. 修改资源路径为绝对路径 #

直接修改public/urlName/index.html里的所有资源引用，把相对路径改成绝对路径：

• 原路径：./style.css
• 修改后：/urlName/style.css
  这样无论是否带尾斜杠，浏览器都会请求正确的资源地址。

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