Vue-cli项目中如何从src目录外部加载Vue组件？

嘿，我来帮你搞定这个问题！你用vue-cli创建的项目要引入本地其他文件夹的组件，其实不用慌，有几个实用的解决思路，就算不太懂Webpack也能轻松搞定：

方法一：直接使用相对路径引入 #

这是最直接的方式，不用改动任何配置。假设你的主项目在/project-main目录下，要引入的组件在同级的/shared-components/MyComponent.vue，那你在主项目的.vue文件里可以直接这样写：

import MyComponent from '../../shared-components/MyComponent.vue'

这里的../代表向上跳转一级目录，多写几个就能定位到你目标文件夹的位置。这种方式的好处是简单快速，缺点是如果目标路径很深，写起来会有点繁琐。

方法二：配置Webpack别名（推荐） #

如果需要频繁引入外部文件夹的组件，配置Webpack别名能让你彻底告别长长的相对路径，写起来更清爽。不同版本的vue-cli配置方式略有不同，分情况来看：

Vue CLI 3+（含Vue CLI 4/5） #

Vue CLI 3+把Webpack的配置做了封装，你需要在项目根目录创建vue.config.js文件（如果原本没有的话），然后添加如下配置：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // 这里把`@shared`这个别名指向你外部组件的文件夹路径
        '@shared': path.resolve(__dirname, '../shared-components')
      }
    }
  }
};

注意../shared-components是相对于当前项目根目录的外部文件夹路径，你要根据自己实际的项目结构调整这个路径。配置完成后，重启你的开发服务器，之后就可以用别名来引入组件了：

import MyComponent from '@shared/MyComponent.vue'

老版本Vue CLI（基于vue init的项目，比如Vue CLI 2） #

老版本的项目里Webpack配置文件是直接可见的，你找到项目中的build/webpack.base.conf.js，修改其中的resolve.alias部分：

const path = require('path');

module.exports = {
  // ...其他原有配置
  resolve: {
    alias: {
      // 配置别名指向外部组件文件夹
      '@shared': path.resolve(__dirname, '../../shared-components')
    }
  }
};

修改完成后重启开发服务器，就能用别名引入组件了。

额外注意点 #

• 一定要确保路径配置正确，不然会出现组件找不到的错误，你可以打印一下path.resolve的结果来验证路径是否正确。
• 如果外部组件依赖了其他资源（比如样式文件、图片等），也要保证这些资源的路径是可访问的，必要时可以给这些资源也配置对应的别名。
• 如果是跨仓库的组件，还要注意组件的依赖版本和主项目是否兼容，比如Vue的大版本要保持一致，避免出现兼容性问题。

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