使用ES Module导入vue2-datepicker组件报错求助

我通过type="module"属性的script标签引入main.js，先执行了安装命令：

npm install vue2-datepicker --save

之后按照官方文档尝试导入组件：

import DatePicker from 'vue2-datepicker';

结果直接报错：

"Uncaught TypeError: Error resolving module specifier “vue2-datepicker”. Relative module specifiers must start with “./”, “../” or “/”."

我还试了几种导入方式，全失败了：

• 尝试1：

  import DatePicker from "./vue2-datepicker"
  

  错误提示：

  "GET http://127.0.0.1:5500/vue2-datepicker net::ERR_ABORTED 404 (Not Found)"
  

• 尝试2：

  import DatePicker from "./node_modules/vue2-datepicker"
  

  错误提示：

  "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."
  

• 尝试3：

  import DatePicker from "./node_modules/vue2-datepicker/index.min.js"
  

  错误提示：

  "Uncaught SyntaxError: The requested module './node_modules/vue2-datepicker/index.min.js' does not provide an export named 'default'"
  

我的文件目录结构如下：

C:.
├───main.js
└───node_modules
    ├───date-format-parse
    │   ├───es
    │   │   └───locale
    │   ├───lib
    │   │   └───locale
    │   └───src
    │       └───locale
    └───vue2-datepicker
        ├───locale
        │   └───es
        └───scss

解决方法 #

1. 直接导入ES模块版本文件 #

vue2-datepicker的npm包里提供了ES模块入口，直接导入node_modules下对应的文件即可：

// 导入组件
import DatePicker from './node_modules/vue2-datepicker/es/index.js';
// 别忘了导入样式文件
import './node_modules/vue2-datepicker/index.css';

这样就能正确获取到默认导出的组件，同时样式也能正常加载。

2. 用CDN引入ES模块（最省心） #

如果不想折腾本地路径，直接用CDN引入ES模块版本：

<script type="module">
import DatePicker from 'https://unpkg.com/vue2-datepicker@3.11.0/es/index.js';
import 'https://unpkg.com/vue2-datepicker@3.11.0/index.css';

// 全局注册组件
Vue.component('date-picker', DatePicker);
// 或者在Vue实例中局部注册
new Vue({
  el: '#app',
  components: {
    DatePicker
  }
});
</script>

注意把版本号替换成你安装的具体版本。

3. 使用构建工具（推荐长期方案） #

原生ES模块不支持直接解析npm包名（比如vue2-datepicker），因为浏览器没有内置npm包的路径解析能力。推荐用Vite、Webpack这类构建工具，它们会自动处理模块路径：

• 初始化Vite项目：npm init vite@latest
• 按提示创建Vue项目，再安装组件：npm install vue2-datepicker --save
• 在组件里直接导入即可，构建工具会自动处理路径：

  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';
  

为什么之前的尝试都失败？ #

• 直接写vue2-datepicker：浏览器识别不了npm包名，原生ES模块要求必须用相对/绝对路径。
• 导入./vue2-datepicker：这个路径根本不存在，组件在node_modules里，不在项目根目录。
• 导入./node_modules/vue2-datepicker：浏览器请求目录时，服务器返回的是目录列表（HTML文件），不是JS模块，所以MIME类型报错。
• 导入index.min.js：这个文件是UMD格式（适配多种环境），不是ES模块，没有默认导出，所以提示找不到default。

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