组件在发布vue3+vite包后缺少模板或呈现函数。

Question

我想将一个vue3+vite包发布到npm，但是在发布之后，当在测试项目中使用组件时，我遇到了“组件缺少模板或呈现函数”控制台警告，并且我的组件无法工作，并且无法访问它的方法。有什么建议吗？

entrypoint(install.ts):

import Print from '~/components/Print.vue'

export default {
  install: (app: any, options: any): void => {
    app.component('Print', Print)
  }
}

vite.configs.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      fileName: (format) => `vcp.${format}.ts`,
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue'
          }
        }
      },
    }
  },
  plugins: [vue()],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: [
      'vue'
    ],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

package.json:

{
  "name": "vcp",
  "version": "0.9.926",
  "private": false,
  "author": "Alireza Safari <alireza.safaree@gmail.com> (http://alireza-safari.ir)",
  "license": "MIT",
  "main": "./dist/vcp.umd.ts",
  "module": "./dist/vcp.es.ts",
  "description": "Vue Client Print with Template Builder",
  "exports": {
    ".": {
      "import": "./dist/vcp.es.ts",
      "require": "./dist/vcp.umd.ts"
    },
    "./dist/style.css" : "./dist/style.css"
  },
  "keywords": [
    "vcp",
    "vue print",
    "vue client print",
    "template builder",
    "vue report",
    "vue report generator"
  ],
  "files": [
    "dist/*"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test:ui": "vitest --ui",
    "test:run": "vitest run",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.5",
    "print-js": "^1.6.0",
    "register-service-worker": "^1.7.2",
    "typescript": "^4.6.2",
    "vitest": "^0.6.1",
    "vue": "^3.2.31",
    "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.4",
    "@vitest/ui": "^0.6.1",
    "@vue/compiler-sfc": "^3.2.31",
    "cz-conventional-changelog": "^3.3.0",
    "vite": "^2.8.6"
  }
}

Answer 1

我从here那里得到了答案，我也不得不逐个导出我的组件。

安装方法可以与app.use()方法(或vue.use() - vue2)一起使用它来全局添加组件(安装方法注册组件本身)和单独导出app.component()方法或(vue.component() - vue2)导入单个文件中的组件。

我的新install.ts：

import Print from '~/components/Print.vue'

export default {
  install: (app: any, options: any): void => {
    app.component('Print', Print)
  }
}

export { Print }