如何将共享Vue组件移至独立文件夹并解决依赖报错问题

项目结构 #

folder/
├─ projectA/
│  ├─ src/
│  │  ├─ views/
│  │  │  ├─ HomeView.vue
│  ├─ package.json
├─ projectB/
├─ shared/
│  ├─ HelloWorld.vue

ProjectA和ProjectB是通过vue create ...命令创建的独立Vue项目，shared文件夹用于存放两个项目可复用的.vue组件。

尝试在projectA的HomeView.vue中引入shared/HelloWorld.vue组件，代码如下：

HomeView.vue #

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '../../../shared/HelloWorld.vue' // @ 是/src的别名

export default defineComponent({
   name: 'HomeView',
   components: {
       HelloWorld
   }
})
</script>

HelloWorld.vue #

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

当HelloWorld.vue位于projectA的components文件夹内时正常运行，移至shared文件夹后出现如下报错：

ERROR in ../shared/HelloWorld.vue:37:33
TS2307: Cannot find module 'vue' or its corresponding type declarations.
    35 |
    36 | <script lang="ts">
  > 37 | import { defineComponent } from 'vue'
       |                                 ^^^^^
    38 |
    39 | export default defineComponent({
    40 |   name: 'HelloWorld',

修复方案 #

1. 配置TypeScript路径映射与类型检查范围 #

在projectA的tsconfig.json中，添加shared目录的路径别名，并将其纳入类型检查范围：

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

修改后可在HomeView.vue中用更简洁的路径引入组件：

import HelloWorld from '@shared/HelloWorld.vue'

2. 配置Webpack解析别名（Vue CLI项目） #

如果使用Vue CLI，在projectA的vue.config.js中添加Webpack的resolve配置，确保构建工具能正确定位shared目录：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../shared')
      }
    }
  }
}

3. 声明Peer依赖（可选） #

在shared目录下创建package.json，声明vue为peer依赖，让TypeScript识别到依赖来自宿主项目的node_modules：

{
  "name": "shared-components",
  "peerDependencies": {
    "vue": "^3.0.0" // 替换为你的实际Vue版本
  }
}

文档引用 #

为什么人们不能直接使用我的.vue文件？这难道不是共享组件最简单的方式吗？
确实，你可以直接共享.vue文件，任何使用包含Vue编译器的Vue构建的用户都可以立即使用它。

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