【JS】vue3具名导出与默认导出
为什么ajaxFun一定要用大括号，不用就报错。而service不需要打括号。
import service from '@/utils/request'
import {ajaxFun} from "@/utils/common"
这一差异源于 JavaScript 中不同的模块导出和导入方式，下面为你详细解释。
具名导出与默认导出
在 JavaScript ES6 模块系统里，有具名导出和默认导出两种常见的导出方式，不同的导出方式对应不同的导入方式。
- 默认导出（service 的情况）
在 @/utils/request 文件中，使用了默认导出语法。默认导出意味着一个模块只能有一个默认导出项，在导入时可以用任意名称接收这个导出项。示例如下：
request.js 文件（导出部分）
import axios from 'axios';
const service = axios.create({baseURL: xxx,timeout: 5000
});// 默认导出 service
export default service;
shop.js 文件（导入部分）
// 直接导入默认导出项，可自定义名称，这里用 service
import service from '@/utils/request';
- 具名导出（ajaxFun 的情况）
在 @/utils/common 文件中，使用了具名导出语法。具名导出允许一个模块导出多个项，每个导出项都有对应的名称，在导入时需要使用相同的名称，并且用大括号包裹。示例如下：
common.js 文件（导出部分）
// 具名导出 ajaxFun 函数
export function ajaxFun(obj) {try {var formData = new FormData();Object.keys(obj.data).forEach(item => {formData.append(item, obj.data[item]);});return axios({method: obj.method,url: import.meta.env.VITE_BASE_API + obj.url,headers: {'Content-Type': 'multipart/form-data','token': window.localStorage.getItem('token'),},data: formData,});} catch (error) {console.error('ajaxFun函数出错:', error);return Promise.reject(error);}
}
shop.js 文件（导入部分）
// 使用大括号导入具名导出的 ajaxFun 函数
import { ajaxFun } from '@/utils/common';
总结
service 采用默认导出，所以导入时不用大括号，且能自定义导入名称。
ajaxFun 采用具名导出，导入时必须用大括号，并且使用和导出时相同的名称。
若要让 ajaxFun 导入时不用大括号，可将 common.js 里的具名导出改为默认导出：
common.js 文件（修改为默认导出）
function ajaxFun(obj) {// ... 已有代码 ...
}// 默认导出 ajaxFun 函数
export default ajaxFun;
shop.js 文件（修改后的导入方式）
// 不用大括号导入默认导出的 ajaxFun 函数
import ajaxFun from '@/utils/common';