Nuxt：如何将Firebase编译JS文件放入public目录？

完全可行，把编译后的JS文件放到Firebase的public目录是实现需求的正确路径，以下是具体说明和步骤：

为什么static目录会报错 #

直接将带import语句的JS文件放入static目录时，浏览器会把它当作普通脚本执行，而普通脚本默认不支持ES模块语法，因此会抛出"Cannot use import statement outside a module"错误——static目录的文件会被直接部署，没有编译转译过程，无法处理模块语法。

实现步骤 #

1. 编译JS文件

   • 使用Webpack、Rollup或Vite等打包工具，将你的Firebase相关JS模块代码编译成浏览器可直接运行的格式：
     • 配置打包工具输出无依赖的单文件，或者将代码转译为IIFE（自执行函数）/UMD格式，确保最终输出的代码里没有import/export语句。
     • 比如用Webpack时，可在配置中设置output.libraryTarget: 'umd'；用Vite则可以通过build.lib模式打包成独立脚本。

2. 部署到public目录

   • 将编译好的JS文件放到Firebase项目的public目录下，这个目录的内容会被直接部署到主机根目录，访问路径就是/你的编译文件名.js。

3. 页面中引用

   • 在HTML文件里通过<script src="/你的编译文件名.js"></script>引入即可，无需添加type="module"属性，因为编译后的代码已经是兼容浏览器的普通脚本。

内容的提问来源于stack exchange，提问作者Алёна Борисова