VUE3/Vite2 的一些坑

说到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 也是同理，顶多能在测试环境下用用，生产环境下是万万不能使用的