'# 编译uni-app报错：“default“ is not exported by “node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js“
一、背景与问题
在使用uni-app开发小程序时，开发者常会遇到一个令人困惑的编译错误：
ERROR in ./node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js
default is not exported by node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js这个错误通常出现在尝试导入Vue核心模块时，特别是在使用ES模块（ESM）语法时。它揭示了模块系统在现代前端开发中的关键作用，也暴露了不同框架对模块导出方式的兼容性差异。
二、基本原理
在ES模块系统中，模块导出分为两种主要方式：
- 默认导出（Default Export）：通过
export default声明，通常用于导出单一主要对象 - 命名导出（Named Export）：通过
export { ... }声明，用于导出多个命名接口
uni-app的uni-mp-vue模块在构建时采用了特定的模块导出策略，而开发者的代码可能在以下场景中与之产生冲突：
- 使用
import Vue from 'vue'尝试默认导入Vue实例 - 在Vue 3项目中错误使用Vue 2的模块导出方式
- 混合使用CommonJS和ESM模块系统
三、环境准备
建议使用最新版uni-app开发环境：
npm install -g @dcloudio/uni-cli创建一个基础项目：
uni create my-project
cd my-project确保依赖版本一致：
{
"dependencies": {
"@dcloudio/uni-app": "^3.2.1",
"vue": "^3.2.0"
}
}四、核心实现
1. 错误导入方式（典型错误）
// App.vue
import Vue from 'vue'问题分析：uni-mp-vue模块的ESM导出方式可能未包含默认导出，而开发者误以为存在默认导出。
2. 正确导入方式（命名导出）
// App.vue
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')关键代码解释：
createApp是Vue 3的命名导出接口- 正确使用ESM的命名导出方式
- 避免了默认导出的歧义
3. 模块导出验证
// package.json
{
"type": "module"
}关键代码解释：
- 明确声明项目使用ESM模块
- 确保与uni-mp-vue的模块系统兼容
- 避免CommonJS与ESM的混用
五、完整案例
1. 项目结构
my-project/
├── pages/
│ └── index/
│ └── index.vue
├── App.vue
├── main.js
├── package.json
└── vite.config.js2. App.vue
<template>
<view class="container">
<hello-world></hello-world>
</view>
</template>
<script>
import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
createApp(App).mount('#app')
</script>3. main.js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')4. vite.config.js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
define: {
'process.env.NODE_ENV': '"production"'
}
})运行效果：项目成功编译并运行，没有出现默认导出错误。
六、源码解析
1. uni-mp-vue模块导出分析
查看node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js文件，发现其采用如下导出方式：
// vue.runtime.esm.js
export function createApp (appInstance) {
// implementation
}
export function h (selector, props, children) {
// implementation
}关键点：
- 没有默认导出（
export default） - 使用命名导出方式
- 与Vue 3的ESM规范保持一致
2. 项目配置文件分析
vite.config.js中的关键配置：
defineConfig({
plugins: [vue()],
define: {
'process.env.NODE_ENV': '"production"'
}
})关键点：
- 明确指定使用Vue 3的ESM规范
- 设置环境变量避免不必要的打包
- 确保与uni-mp-vue的模块系统兼容
七、进阶使用
1. 多模块导出处理
// utils.js
export function formatTime (date) {
// implementation
}
export function formatDate (date, format) {
// implementation
}使用方式：
import { formatTime, formatDate } from './utils'2. 模块版本管理
npm install -D eslint-plugin-vue配置文件：
// .eslintrc.js
module.exports = {
plugins: ['vue'],
rules: {
'vue/no-unused-components': 'error'
}
}关键点：
- 使用ESLint进行模块规范检查
- 避免未使用的命名导出
- 确保模块导出的一致性
八、性能与工程实践
1. 性能优化
常见问题：错误的模块导出方式可能导致不必要的打包体积
优化方案：
// package.json
{
"sideEffects": false
}关键点：
- 禁用副作用检测
- 减少不必要的模块打包
- 提高构建速度
2. 异常处理
// main.js
import { createApp } from 'vue'
import App from './App.vue'
try {
createApp(App).mount('#app')
} catch (err) {
console.error('Vue initialization failed:', err)
}关键点：
- 处理模块导入失败的异常
- 提供清晰的错误日志
- 确保项目稳定性
3. 安全风险
常见风险：使用未验证的第三方模块可能导致安全漏洞
防御措施：
npm audit关键点：
- 定期执行依赖审计
- 限制依赖版本范围
- 使用安全的模块源
九、常见问题与踩坑
1. 错误场景一：混合使用CommonJS
// App.js
const Vue = require('vue')解决办法：
- 修改为ESM导入方式
- 更新
package.json的type字段
2. 错误场景二：不兼容的Vue版本
{
"dependencies": {
"vue": "^2.6.14"
}
}解决办法：
- 更新到Vue 3版本
- 检查uni-mp-vue的兼容性文档
3. 错误场景三：未正确配置模块类型
{
"type": "commonjs"
}解决办法：
- 设置
type: "module"以使用ESM - 确保所有模块都使用ESM语法
十、最佳实践
1. 推荐方案
- 始终使用ESM导入：对于Vue 3项目，使用
import { createApp } from 'vue' - 明确模块类型：在
package.json中设置type: "module" - 严格版本管理：使用
package.json中的版本范围限制 - 定期依赖审计：执行
npm audit检查安全漏洞
2. 避免方案
- 混合使用模块系统：避免同时使用CommonJS和ESM
- 错误的默认导入：不要使用
import Vue from 'vue'导入Vue实例 - 未验证的第三方模块：避免使用未经验证的模块源
十一、总结
uni-app中出现的"default is not exported"错误，本质上是模块系统兼容性问题的体现。通过深入分析ESM的导出机制、Vue版本兼容性以及项目配置规范，我们可以有效解决这类问题。
在实际开发中，建议：
- 严格遵守ESM的命名导出规范
- 使用
package.json明确模块类型 - 定期检查依赖版本和安全审计
- 避免混合使用不同的模块系统
对于需要兼容旧项目的场景，可以考虑使用Vue 2的CommonJS方式，但需注意：随着Vue 3的普及，ESM方式将逐渐成为主流实践。理解和掌握模块系统的本质，是现代前端开发的关键能力。