MENU

VUE3/Vite2 的一些坑

March 27, 2021 • Read: 169 • Node.js

说到Vue3,自然是少不了Vue3的新特性——组合API,也正是这个组合API,给我坑惨了

最初是我写完项目以后,打包出来的项目无法使用我封装好的axios模块,

TypeError: Cannot read property 'post' of undefined

我最开始是认为是我没有正确的封装axios,但是一起引用的element-plus的弹窗组件也不能正常允许,这就很令人疑惑了,为什么呢?我查看了vite最近的issue,没有发现和我这个bug相似的issue,那这个就应该是我自己的问题了

我在测试环境中打印出了封装好的axios模块,发现是正常的,

console.log(ctx.$axios);
{
    get:f(url),
    post:f post(httpUrl, data),
}

但是当我在生产环境中打开的时候,却发现这个不对劲了

undefined

为什么生产环境中不能这样使用呢?顺藤摸瓜,我们来看看这个ctx里到底有啥吧

console.log(ctx)

在测试环境中,输出了如下内容:

active: (...)
containerActive: (...)
login: (...)
nickname: (...)
passwd1: (...)
passwd2: (...)
password: (...)
register: (...)
toggleForm: (...)
username: (...)
$: (...)
$ELEMENT: (...)
$alert: (...)
$attrs: (...)
$axios: (...)
$confirm: (...)
$data: (...)
$el: (...)
$emit: (...)
...

但是在生产环境里,却不一样了:

上面的东西全没了,所以才无法在生产环境中使用封装好的axios

通过查阅相关资料,我发现,通过const { ctx } = getCurrentInstance();生成的ctx并不能在生产环境中使用,在官方文档中,是这样说的:

setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

也就是说,当setup函数执行的时候,this都还没创建好,怎么可能可以使用this呢?getCurrentInstance 也是同理,顶多能在测试环境下用用,生产环境下是万万不能使用的

Archives Tip
QR Code for this page
Tipping QR Code