Vue3 Composition项目打包上生产后 ctx, refs 无法获取DOM节点

Vue3项目打包上生产后，const { ctx } = getCurrentInstance()无法获取路由/全局挂载对象问题, 导致getCurrentInstance代表上下文，即当前实例。

ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx

**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- const { ctx } = getCurrentInstance()
+ const { proxy } = getCurrentInstance()

const enterDialog = () => {
    // 获取dom节点
    proxy.$refs.roleForm.validate(async (valid) => {
    if (valid) {
    	let res
        if (isEdit.value) {
        	res = await EditRole(form)
        } else {
        res = await addRole(form)
        }
        if (res.meta.success) {
        	getList()
        	dialogFormVisible.value = false
        	initForm()
        }
    }
})

或者 不使用 getCurrentInstance

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<el-form
	:model="form"
	:rules="rules"
    label-position="top"
    ref="menuFormRef"
    >
...
    
const menuFormRef = ref<null | HTMLInputElement>(null)
    
const enterDialog = () => {
    const menuForm = unref(menuFormRef)
    if (!menuForm) return
    menuForm.validate(async valid => {
        if (valid) {
            let res
            if (isEdit.value) {
                res = await UpdateMenu(form)
            } else {
                res = await addMenu(form)
            }
            if (res.meta.success) {
                getTree()
                closeDialog()
            }
        } else {}
    })
}
return {
    ....
    getCurrentInstance,
    enterDialog,
}

在使用 第三方UI组件库时,如element-plus使用 实现如vue2.0 this.$confirm this.$message,两种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在使用的页面引入
import { ElMessageBox } from 'element-plus'
ElMessageBox.confirm("此操作将永久删除所有角色下该菜单, 是否继续?", "提示", {
	confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
}).then(async () => {
}).catch((e) => {})

或者
const { proxy } = getCurrentInstance()
proxy.confirm("此操作将永久删除所有角色下该菜单, 是否继续?", "提示", {
	confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
}).then(async () => {
}).catch((e) => {})