报错信息
报错信息:The requested module ‘/node_modules/axios/index.js?v=2866e624’ does not provide an export named ‘default’
现象
使用 vite 打包工具开发时出现,生产环境正常
原因
原因在于 Vite
是完全依靠 ESM
原生能力的,也就是他只认识 import
,因为 Vite
依赖 script
的 module
属性。
我们的代码最终都会被送到浏览器里执行,require
是 cjs
的关键词,浏览器环境本身就没定义这个方法,自然就报错了。
这里和 webpack
不一样,webpack
把文件送到浏览器之前是会进行预打包的,这时候已经将 require
转换成 浏览器能兼容的方法了。
出现上述报错的原因可能是依赖中通过import
导入一个ES6
模块,但是这个ES6
模块中使用了require
,当Vite
去构建的时候,发现是采用import
导入的就不会预编译,从而报错。
查看原文
解决方法
使用一个捆绑的 axios
的 es
模块
@bundled-es-modules/axios 说明文档
npm i @bundled-es-modules/axios
// 引入
import { axios } from 'axios';
其他解决方案
import axios 导致 vue v3 和 vite 出现问题