在webpack捆绑的vue 3插件中没有触发onMounted的回调

请原谅我太满足于解释我的问题了。

我做了一个简单的npm vue3 hellowword webpack 插件。这个插件从内部控制台的简单文本 on已安装 方法

如果我使用捆绑这个helloworld插件 vue-cli 工具,则会触发从插件中回调onMounted。但捆绑时不会发生同样的情况 webpack .

我认为问题的出现是因为currenIntance(我猜它是一个vue实例)为null,如下图所示。

内容:当插件被webpack捆绑时

Webpack.config.babel.js

const TerserPlugin = require("terser-webpack-plugin")
const libraryNamePlugin = 'vue3-helloworld-webpack';
 
const appConfig = {
  entry: {
    'vue3-helloworld-webpack': __dirname + '/src/index.js',
    'vue3-helloworld-webpack.min': __dirname + '/src/index.js'
  },
 
  devtool: 'source-map',
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
    library: libraryNamePlugin,
    libraryTarget: 'umd'
  },
 
  module: {
    rules: [
        {
          test: /(\.jsx|\.js)$/,
          loader: 'babel-loader',
          exclude: /(node_modules|bower_components)/
        },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  },
 
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        include: 'vue3-helloworld-webpack.min.js',
      }),
    ],
  },
};
 
module.exports = [appConfig];

package.json

....
"main": "dist/vue3-helloworld-webpack.js",
  "scripts": {
    "build": "webpack --config webpack.config.babel.js"
  },
  "dependencies": {
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/register": "^7.13.16",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-add-module-exports": "^1.0.4",
    "babel-preset-es2015": "^6.24.1",
    "chai": "^4.3.4",
    "eslint": "^7.27.0",
    "eslint-loader": "^4.0.2",
    "lodash": "^4.17.21",
    "mocha": "^8.4.0",
    "terser-webpack-plugin": "^5.1.3",
    "vue": "^3.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "yards": "^0.1.4"
  }
....

vue3-helloworld-webpack.js

import {onMounted, h} from 'vue'
const config = { msg: String }
export default {
  name: 'vue3-helloworld-webpack',
  props : config,
  setup(props) {
    console.log("setup() is invoked")
    console.log(props.msg);

    onMounted(function () {
      console.log("Hooray!!! Onmounted() is triggered")
    });
  },

  render() {
    return h('div', {
      id: 'helloworld-1'
    });
  }
}

src/index.js

import vue3helloworldwebpack from './vue3-helloworld-vuewebpack';
const install = (app) => {
  app.component(vue3helloworldwebpack.name, vue3helloworldwebpack);
};
export default install;

结果:当插件被其他非常简单的vue应用程序使用时

Vue cli捆绑插件时的内容

package.json

....
"main": "dist/vue3-helloworld-vuecli.umd.js",
  "scripts": {
    "build": "vue-cli-service build --formats umd --target lib ./src/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.6",
    "@vue/cli-plugin-eslint": "^4.5.6",
    "@vue/cli-plugin-unit-jest": "^4.5.6",
    "@vue/cli-service": "^4.5.6",
    "@vue/compiler-sfc": "^3.0.0-rc.10",
    "@vue/test-utils": "^2.0.0-beta.5",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.3.0",
    "eslint": "^7.9.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0-0",
    "husky": "^6.0.0",
    "prettier": "^2.1.1",
    "typescript": "^4.0.2",
    "vue": "^3.0.0",
    "vue-jest": "^5.0.0-alpha.4"
  }
....

除了名称和webpack配置文件外,其他代码与webpack版本相似。

后果

另一个简单的vue3应用程序正在使用创建的插件(vue3helloworld webpack)

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import Vue3HelloworldWebpack from 'vue3-helloworld-webpack'
createApp(App).use(Vue3HelloworldWebpack).mount('#app')

应用.vue

<template> <vue3-helloworld-webpack msg="Welcome!!!!" /></template>

我们可以获得创建的插件: webpack 和 vue-cli GitHub上的版本。

我的问题

Vue-cli版本确实有效。有趣的是,同样的webpack文件配置也适用于vue2插件。

但它不适用于vue3插件,我如何在不使用vue-cli但使用webpack版本的情况下做到这一点?