import Header from和import { Header } from有什么区别

📅 2026-08-25 ✍️ 快蛙编辑部

Vue/JS 中 import Header 和 import { Header } 的区别是：默认导出不要花括号，命名导出必须有花括号。至于到底有没有花括号，取决于源头怎么导出，不取决于你想怎么用。

导入写法	对应导出方式	通俗含义
`import Header from './file'`	`export default Header`	导入该模块的 "主角"（默认导出）
`import { Header } from './file'`	`export const Header`	从模块中按名字拿取某个成员（命名导出）

export default function Header() {
  console.log('I am the default export');
}

正确的导入方式（必须不带花括号）

import Header from './Header.js';
import Header from './Header.vue';

export const Header = () => { /* ... */ };
export const Footer = () => { /* ... */ };
export const Sidebar = () => { /* ... */ };

正确的导入方式（必须带花括号）

import { Header } from './components.js';
import { Header, Footer } from './components.js';

备注：一个文件同时包含两种导出，两种导入方式都支持起别名，在重名冲突时非常有用。如：import { Header as AppHeader } from './components.js';