如何使用@符号导入模块？导入@vue时遇解析失败错误

错误原因解析 #

你遇到的报错有两个核心原因：

1. 浏览器原生ES模块限制：浏览器原生不支持直接导入npm包名（包括带@的命名空间包），必须使用相对路径（.//../）或绝对路径。
2. @vue命名空间包的特性：@vue是Vue的命名空间包，它本身没有对外导出任何内容，内部包含的是@vue/reactivity、@vue/runtime-core等子包，直接导入@vue本身没有意义。

正确的@符号导入场景及用法 #

1. 导入@vue下的具体子包

如果需要使用Vue的底层模块（比如响应式API），可以直接导入@vue下的对应子包，前提是你使用了打包工具（如Vite、Webpack），这些工具会自动解析npm包路径：

// 导入响应式模块
import { reactive, ref } from '@vue/reactivity'
// 导入运行时核心模块
import { createVNode } from '@vue/runtime-core'

如果是纯浏览器原生环境（无打包工具），需要写完整的相对路径到对应模块的编译文件：

import { reactive } from './node_modules/@vue/reactivity/dist/reactivity.esm-browser.js'

2. 导入Vue核心API（无需@vue）

如果你只是想使用Vue的核心功能（比如创建应用），直接导入vue包即可，它已经封装了核心模块的导出：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. 自定义@路径别名（常用场景）

很多项目会把@配置成项目src目录的别名，方便导入本地文件，这需要在打包工具的配置文件中设置：
以Vite为例，修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

配置后就可以用@快速导入src下的文件：

import MyComponent from '@/components/MyComponent.vue'
import utils from '@/utils/helper.js'

内容的提问来源于stack exchange，提问作者little aya