vite + vue3 + element plus踩坑

Cannot read property 'success' of undefined

产生原因：setup中使用了ctx.$message.success

const {ctx} = getCurrentInstance()
ctx.$message.success('...')

ctx 打包之后无法调用$message
解决办法：可以使用proxy

const {proxy} = getCurrentInstance()
proxy.$message.success('...')

ReferenceError: form is not defined

产生原因：html中使用了<el-form ref="formRef">, script中没有定义formRef，导致报错
解决办法：

<script setup>
    const formRef = ref(null)
</script>

或者直接删除ref="formRef"

Uncaught (in promise) DOMException: Blocked a frame with origin "test.com" from accessing a cross-origin frame

部署之后切换左侧路由菜单，报以上错误。
查看发现本地环境有warnning：runtime-core.esm-bundler.js:38 [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

产生原因：代码中使用了watch(route)

解决办法如下（使用computed或者watchEffect）：

可参照github对应issue

ReferenceError: visible is not defined

产生原因：使用了<el-dialog/>组件，使用v-model进行了显隐数据绑定
解决办法: 将v-model改成:model-value即可

Error: Can't find stylesheet to import.

修改element-plus主题色报错

解决办法：将～改成node_module路径

$--font-path: '../../node_modules/element-plus/lib/theme-chalk/fonts';

@import '../../node_modules/element-plus/packages/theme-chalk/src/index';