Vue是否支持多导入起始路径？如何调试导入路径报错？

一、调试导入配置差异的步骤 #

1. 检查路径别名配置 #

• 先看旧项目的配置文件：
  • Vue CLI项目找根目录的vue.config.js，查看configureWebpack或chainWebpack里的resolve.alias，确认是否把src/c目录映射成了c别名。
  • Vite项目看vite.config.js的resolve.alias字段，同样找是否有c对应的路径映射。
• 把自己项目的配置和旧项目对比，补上缺失的别名规则。

2. 查看jsconfig/tsconfig路径映射 #

• 旧项目里的jsconfig.json或tsconfig.json（用TypeScript的话），检查compilerOptions.paths字段，这里可能配置了让编译工具识别c/d这类路径的规则，比如：

  {
    "compilerOptions": {
      "paths": {
        "c/*": ["src/c/*"]
      }
    }
  }
  

• 自己的项目如果没有这个配置，直接复制对应的规则进去测试。

3. 对比脚手架类型与依赖版本 #

• 确认旧项目和自己的项目是不是用的同一种脚手架（Vue CLI还是Vite），不同脚手架的配置逻辑不一样。
• 检查核心依赖版本，比如@vue/cli-service或vite的版本，版本差异可能导致配置不兼容。

4. 从启动日志找线索 #

• 执行yarn serve时，仔细看终端输出的日志，旧项目可能会打印路径解析相关的配置信息，自己的项目对比这些日志找差异。
• 可以在自己的项目配置里临时加调试代码，比如Vue CLI的vue.config.js里：

  const path = require('path')
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          // 启动时打印当前别名配置
          ...(() => {
            console.log('当前别名配置:', {
              'c': path.resolve(__dirname, 'src/c')
            })
            return {}
          })()
        }
      }
    }
  }
  

  启动后就能在终端看到当前的别名设置情况。

二、Vue支持多导入起始路径吗？ #

完全支持，不管是Vue CLI（基于Webpack）还是Vite创建的项目，都可以配置多个导入起始路径（也就是别名）：

Vue CLI（Webpack）配置示例 #

在vue.config.js中添加：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 根路径别名
        'c': path.resolve(__dirname, 'src/c'), // 对应src/c的别名
        'utils': path.resolve(__dirname, 'src/utils') // 另一个起始路径别名
      }
    }
  }
}

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'),
      'c': path.resolve(__dirname, 'src/c'),
      'components': path.resolve(__dirname, 'src/components')
    }
  }
})

让编辑器识别路径别名 #

同时要在jsconfig.json（或tsconfig.json）里配置paths，这样编辑器能提供智能提示：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "c/*": ["src/c/*"],
      "utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"]
}

内容的提问来源于stack exchange，提问作者Zhang Li