Nuxt3中setup阶段用useFetch访问public资源路由匹配失败求助

问题原因 #

useFetch 是Nuxt的通用请求方法，会在服务端渲染阶段执行请求。此时Nuxt的路由系统会拦截所有非API/静态资源路由的请求，导致访问/text.txt这类public下的静态资源时，被路由判定为未匹配的路径，抛出警告。而mounted钩子中的原生fetch仅在客户端执行，直接从浏览器发起请求，不会经过Nuxt服务端的路由拦截，因此可以正常获取资源。

解决办法 #

以下三种方案任选其一：

1. 强制useFetch仅在客户端执行
   在调用useFetch时添加server: false配置，让请求只在浏览器环境发起，避免服务端路由拦截：

   <script setup>
   const { data } = await useFetch('/text.txt', { server: false });
   console.log(data.value);
   </script>
   

2. 指定完整的静态资源基础路径
   通过useRuntimeConfig获取项目的基础URL，拼接成完整请求地址，让服务端请求直接指向静态资源的正确路径：

   <script setup>
   const config = useRuntimeConfig();
   // 开发环境为http://localhost:3000，生产环境为你的域名
   const { data } = await useFetch(`${config.public.baseURL}/text.txt`);
   console.log(data.value);
   </script>
   

   需要在nuxt.config.ts中配置public.baseURL：

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         baseURL: process.env.NODE_ENV === 'production' ? 'https://your-domain.com' : 'http://localhost:3000'
       }
     }
   })
   

3. 改用Vite静态资源导入（替代请求方式）
   如果你的资源是静态文本，可直接用Vite的import.meta.glob导入，无需发起HTTP请求，也能避免路由问题：

   <script setup>
   // 匹配public下的txt文件，as: 'raw'表示获取文本内容
   const fileModules = import.meta.glob('/public/*.txt', { as: 'raw' });
   // 加载指定文件
   const textContent = await fileModules['/public/text.txt']();
   console.log(textContent);
   </script>
   

验证效果 #

以上方案都能消除[Vue Router warn]: No match found for location with path "/text.txt"的警告，同时正常获取public文件夹下的资源内容。

内容的提问来源于stack exchange，提问作者Michał Sadowski