发布vue3+vite包后组件缺少模板或渲染功能

Question

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

入口点(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 }

发布vue3+vite包后组件缺少模板或渲染功能

Component is missing template or render function after publishing vue3+vite package

vue.js

npm

vite