Vite环境下浏览器端使用Dynamic Imports加载模块导入依赖报错如何解决？

1. 浏览器原生ES Module规范不支持裸模块导入：即导入路径不是相对路径、绝对路径或完整URL的导入写法（例如import moment from "moment"就属于裸导入），这类导入只能在构建工具的编译阶段被解析替换为实际可访问的资源路径。你当前直接将未编译的one.js通过静态服务返回给浏览器，浏览器无法识别moment对应的实际资源地址，因此抛出路径解析错误。
2. 你当前的动态导入写法是直接引入外部服务的完整URL脚本，Vite不会对该外部脚本做任何编译处理，脚本完全交给浏览器原生解析，因此不会自动处理其中的裸导入逻辑。

方案1：提前编译one.js（稳定性最高） #

将one.js作为单独的构建入口，用Vite、Rollup等构建工具打包，打包时可以选择将所有依赖（例如moment）一起打包到产物中，也可以配置外置依赖将其替换为对应的公网/内网资源地址，将打包后的产物部署到3000/5000的静态服务即可。
参考Vite单独打包one.js的配置：

// vite.config.one.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'one.js',
      formats: ['es'],
      fileName: () => 'one.js'
    },
    // 若不需要把依赖打包进产物，可配置外置依赖，配合全局变量/资源地址使用
    // external: ['moment'],
    // rollupOptions: {
    //   output: {
    //     globals: {
    //       moment: 'moment'
    //     }
    //   }
    // }
  }
})

运行vite build --config vite.config.one.js得到的产物即可直接被浏览器导入使用。

方案2：one.js中使用完整URL导入依赖 #

不需要额外编译one.js，直接将其中的裸导入写法改为对应依赖的完整资源URL即可：

// 替换为moment的ES模块格式完整资源地址
import moment from "moment的完整资源URL";

const hello = () => {
    console.log('Hello from one ', moment().format());
};

export default hello;

浏览器原生支持完整URL形式的模块导入，无需额外处理即可正常运行。

方案3：主应用配置importmap #

如果你的项目仅面向支持importmap的现代浏览器，可以在主应用的HTML入口中添加importmap声明，提前映射裸模块对应的实际资源地址：

<script type="importmap">
{
  "imports": {
    "moment": "moment的完整资源URL"
  }
}
</script>

配置完成后，one.js中的裸导入写法就可以被浏览器正常解析。

你之前遇到的Vite无法分析导入内容的警告，是因为动态导入的路径是完全动态生成的完整外部URL，Vite预构建逻辑无法处理。如果确认该导入不需要Vite处理，可以添加注释关闭警告：

import(/* @vite-ignore */ getPath()).then((Module) => {
  Module.default();
});

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