在 nuxt vue/typescript 项目中包含 Vue 组件作为节点模块答案

【问题标题】：Including Vue Components as node modules in a nuxt vue/typescript project在 nuxt vue/typescript 项目中包含 Vue 组件作为节点模块
【发布时间】：2020-12-07 15:41:20
【问题描述】：

我有一个最近迁移到 typescript 的 nuxt 项目。我还有一个单独的仓库，里面装满了 vue 组件，这些组件作为节点模块导入到我的 nuxt 项目中。我已使用import Component from '@place/vue-component' 将它们包含在我的基于打字稿类的 SFC 中当我尝试运行我的应用程序时，我收到 500 条错误消息render function or template not defined in component: Card，但应用程序编译成功。

我的 tsconfig：

{
  "compilerOptions": {
    "target": "ES2018",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "types": [
      "@types/node",
      "@nuxt/types"
    ],
  },
  "exclude": [
    "node_modules"
  ],
}

任何想法都将不胜感激！

【问题讨论】：

标签： javascript typescript vue.js import nuxt.js

【解决方案1】：

花了一些时间，但这对我有用：

在我的 vue.shim.d.ts 文件中，我需要像这样声明每个导入：

declare module "@place/vue-component" {
    import Vue from 'vue'
    export default Vue
}

此外：

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

然后这是我的 tsconfig：

{
  "compilerOptions": {
    "target": "ES2018",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "types": [
      "@types/node",
      "@nuxt/types"
    ],
  },
  "exclude": [
    "node_modules"
  ],
}

【讨论】：