在Nuxt3+Vite项目中按需引入Bootstrap5 JS模块报错如何解决？

错误根因 #

public目录下的资源属于静态资源，不会经过Vite的编译处理，直接以原始内容返回给浏览器，浏览器默认不会把普通script标签当做ES模块处理，因此会报Cannot use import statement outside a module语法错误。

正确实现步骤 #

1. 将你编写的bootstrap.js文件从public目录移动到项目assets/js目录下，无对应目录可新建，文件原有按需导入的内容无需修改。
2. 移除nuxt.config.ts中meta.script里对该文件的引入配置。
3. 在项目plugins目录下新建bootstrap.client.ts文件，写入以下内容：

import '~/assets/js/bootstrap.js'

文件名带.client后缀是为了确保该插件只会在客户端运行，避免服务端渲染阶段因缺少浏览器DOM环境报错。

可选扩展配置 #

如果需要在组件内直接调用Bootstrap JS实例（比如手动控制模态框、提示框的显示隐藏），可以修改plugins/bootstrap.client.ts内容如下，将Bootstrap挂载到Nuxt全局实例：

import * as bootstrap from 'bootstrap'

declare module '#app' {
  interface NuxtApp {
    $bootstrap: typeof bootstrap
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('bootstrap', bootstrap)
})

之后在组件内即可通过const { $bootstrap } = useNuxtApp()获取Bootstrap对象使用。

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