Vue.js项目通过jsconfig.json配置路径别名编译报错问题求助

算力阿峰

2026-10-2

你遇到的报错本质是构建工具没有识别你配置的路径别名，jsconfig.json仅用于给VS Code等编辑器提供路径智能提示，不会被Vue项目的构建工具（Webpack/Vite）读取，你需要额外在构建工具的配置中补充别名规则，具体操作如下：

情况1：使用Vue CLI（基于Webpack构建）

修改项目根目录下的vue.config.js，添加别名配置：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  // 其他原有配置保留
  configureWebpack: {
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components')
      }
    }
  }
})

配置完成后重启开发服务即可生效。

情况2：使用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: {
      '@components': path.resolve(__dirname, './src/components')
    }
  }
})

配置完成后重启开发服务即可生效。