项目运行打包之后是无法挂载到window对象上的
Closed this issue · 8 comments
项目运行打包之后是无法挂载到window对象上的
@SakuraWord
你现在可以通过以下方式挂载到 window 对象：
You can now mount to the window object in the following ways:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vite App</title>
<!-- 确保你的当前目录有该 umd 产物 -->
<script src="yourdir/dist/v3/index.umd.js"></script>
</head>
<body>
</body>
<script>
// 使用时需要用 `use` 方法注册到 `Vue` 中，因为导出的是插件对象
window.yourVariable = VueDemiTemplateComponent
</script>
</html>另外我已经更新了文档，感谢你的提问。
Also I have updated the documentation, thank you for your question.
应该是系统打包本身就存在问题吧，我试过很多种方式了，并且通过此种方式引用别人正常打包出来的是ok的，通过这种方式打包出来的就会报错
你自己测试的过程中如果文件在电脑本地文件引入是没问题的，只要放在线上或者在cdn上就会100%出现各种问题
@SakuraWord 实际上出现问题的原因 1. 可能是你页面有多个 Vue 实例在运行，注册的时候注册到另一个实例上了 2. umd 的包在浏览器上实际是定义了一个变量，你可能要考虑是不是 script 的执行顺序导致出现报错等问题。 如果还是不行建议你考虑优先 bundle 项目用 cjs 或 esm 引入吧，没有最小复现没法判断。
大佬，你有试过你的钩子函数吗，我使用你最新的代码，打包之后的组件引入后，setup中的钩子函数都是无法运行的，本地环境执行没有问题
mounted(){ //可运行
console.log('435345345345')
},
setup() {
onMounted(() => { //不能运行
console.log('123123123123')
})
},
@SakuraWord 如果是 Vue 2.6 及以下需要额外引入插件才能用 composition-api ，请提供最小复现，否则不再回复了。
src目录组件代码添加钩子函数：
mounted(){ //可运行
console.log('435345345345')
},
setup() {
onMounted(() => { //不能运行
console.log('123123123123')
})
},
新建vue3项目，在vue3环境下，通过cdn导入，打包之后，本地启动http-server，之后vue3环境导入：
<script src="./node_modules/vue/dist/vue.global.prod.js"></script>
<script src="http://127.0.0.1:4000/v3/index.umd.js"></script>
挂载vue组件:
if(window.DxHeader) {
app.use(window.DxHeader)
}
使用：
src目录组件代码添加钩子函数：
mounted(){ //可运行
console.log('435345345345')
},
setup() {
onMounted(() => { //不能运行
console.log('123123123123')
})
},
新建vue3项目，在vue3环境下，通过cdn导入，打包之后，本地启动http-server，之后vue3环境导入：
<script src="./node_modules/vue/dist/vue.global.prod.js"></script>
<script src="http://127.0.0.1:4000/v3/index.umd.js"></script>
挂载vue组件:
if(window.DxHeader) {
app.use(window.DxHeader)
}
使用：