Nuxt 3项目iframe加载PDF开发正常生产环境报404问题求助

核心问题分析 #

• Nuxt3的public文件夹是静态资源的根目录，访问时不需要在路径里加/public/前缀
• 开发模式和生产模式下静态资源的解析逻辑不同，错误的路径前缀（比如/public/、/static/）会导致生产环境找不到资源
• 路径中的反斜杠\在Web环境下应该用正斜杠/

具体解决步骤 #

1. 正确放置PDF文件 #

把PDF文件放到项目根目录的public文件夹下（没有的话直接新建），构建后文件会自动被复制到.output/public目录，这是Nuxt3官方推荐的静态资源存放位置。

2. 修改iframe的src路径 #

将原来的路径修改为直接指向文件名，去掉多余前缀，同时把反斜杠换成正斜杠：

<iframe src="/Name_of_pdf.pdf#page=3" width="100%" height="700px"></iframe>

• 解释：/Name_of_pdf.pdf会直接映射到生产环境的.output/public/Name_of_pdf.pdf，Vue Router不会把它当成路由路径处理，而是直接请求静态资源。

3. 验证构建和运行 #

执行构建命令：

npm run build

启动生产服务：

node .output/server/index.mjs

此时访问页面，iframe就能正常加载PDF文件。

常见误区说明 #

• 不要把静态资源放到assets文件夹：assets里的文件会被Webpack处理，需要通过~/assets/xxx方式引用，且文件名会被哈希化，不适合直接用iframe加载。
• 不要手动修改.output文件夹：构建过程会自动处理静态资源，手动修改会被下次构建覆盖，不符合Nuxt的工作流程。
• 路径必须用正斜杠/：Web环境下统一使用正斜杠作为路径分隔符，反斜杠\是Windows本地路径符号，在Web请求中会解析错误。

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