大佬教程收集整理的这篇文章主要介绍了在 webpack 捆绑的 vue 3 插件中没有触发 onMounted 的回调 Content：当插件被 webpack 捆绑时Vue-cli 捆绑插件时的内容另一个使用创建的插件的简单 vue3 应用（vue3-helloworld-webpack）我的问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
请原谅我用冗长的内容来解释我的问题。
我做了一个简单的 npm vue3-Helloword-webpack 插件。这个插件控制 onMounted 方法内部的简单文本。
如果我使用 vue-cli 工具捆绑这个 Helloworld 插件，将会触发 onMounted from plugin 的回调。但是通过 webpack 进行捆绑时不会发生同样的情况。
我认为问题是由于currenIntance（我猜它是一个vue实例）为空而发生的，如下图所示。
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 应用程序使用时
package.json
....
"main": "dist/vue3-Helloworld-vuecli.umd.Js","scripts": {
"build": "vue-cli-service build --formats umd --target lib ./src/index.Js"
},"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-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-jest": "^5.0.0-Alpha.4"
}
....
其他代码与 webpack 版本相似，除了名称和 webpack 配置文件。
结果
import { createApp } from 'vue'
import App from './App.vue'
import Vue3HelloworlDWebpack from 'vue3-Helloworld-webpack'
createApp(App).use(Vue3HelloworlDWebpack).mount('#app')
App.vue
<template> <vue3-Helloworld-webpack msg="Welcome!!!!" /></template>
我们可以在 GitHub 上获得创建的插件：webpack 和 vue-cli 版本。
Vue cli 版本确实有效。一件有趣的事情，同样的 webpack 文件配置也适用于 vue2 插件。
但它不适用于 vue 3 插件，如何在不使用 vue-cli 而是使用 webpack 版本的情况下做到这一点？
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的在 webpack 捆绑的 vue 3 插件中没有触发 onMounted 的回调 Content：当插件被 webpack 捆绑时Vue-cli 捆绑插件时的内容另一个使用创建的插件的简单 vue3 应用（vue3-helloworld-webpack）我的问题全部内容，希望文章能够帮你解决在 webpack 捆绑的 vue 3 插件中没有触发 onMounted 的回调 Content：当插件被 webpack 捆绑时Vue-cli 捆绑插件时的内容另一个使用创建的插件的简单 vue3 应用（vue3-helloworld-webpack）我的问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。