Vue项目中import语句的@符号含义及导入写法咨询

一、@符号的含义 #

• @是项目构建工具（webpack、Vite等）配置的路径别名，核心作用是简化模块导入的路径书写，避免使用多层相对路径（如../../components/...）。
• 它的具体指向由项目配置文件定义：
  • webpack项目：在webpack.config.js的resolve.alias中配置，示例：'@': path.resolve(__dirname, 'src')，即@对应项目根目录下的src文件夹；
  • Vite项目：在vite.config.js的resolve.alias中配置，同样默认指向src目录。
• 举例：import my_module from '@/components/share/my_module.vue'等价于从src/components/share/my_module.vue导入默认导出的内容。

二、import * from '@/components/my_module.vue'的含义 #

• 正确的完整写法应为import * as myModule from '@/components/my_module.vue'（必须指定一个别名来承接所有导出成员）。
• 这个语法表示导入目标模块中所有通过export导出的成员，包括命名导出和默认导出：
  • 所有命名导出的成员会成为myModule对象的属性，可通过myModule.xxx访问；
  • 默认导出的内容会挂载到myModule.default属性上（比如Vue组件的默认导出就是组件本身）。

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