vue3升级指南

一、vue-i18n的升级

v8与v9的区别

1、vue2使用的是vue-i18n 8.x版本，需要升级到9.x，否则报错；
2、升级到9.x以后我遇到了更大的坑 createI18n的时候报错 effectScope 不是函数，我的思路一直是查createI18n报错，搞了一个早上，在绝望的时候换了一个思路，查effectScope是vue的哪个版本出的，果然，3.2以上，我用的3.1，升级到3.2顺利解决；
3、i18n.mergeLocaleMessage 不是函数，9.x需要改成 i18n.global.mergeLocaleMessage。

二、最大的坑（坑了我一周）

错误描述：在登录验证的时候需要拖动滑块验证再调接口登录，在这个过程中报错如下：

image.png

先报：Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null
点登录，接口成功后报错：TypeError: Cannot read property '__asyncLoader' of undefined
网上查__asyncLoader都是关于异步组件的信息，纠结了几天，各种尝试都不行（唯一能确定的是不打开拖动图不会报错），我就放了几天先做需求，第二周我又想再看看这个问题：
这次我换了一个思路，排除法：
1、基于之前的思路，不打开拖动验证的图不会报错，网上查 'insertBefore' of null，都是关于v-if改v-show，解决不了，甚至我改成left:999;依然解决不了问题；但是我发现如果拖动图常显，登录成功跳转成功，都没有报错；
2、我改变思路，会不会是表单验证影响了，修改后没用，但是我发现一个提交按钮的loading标识，我注释了这个标识居然就不报错了，最后出现这个问题的原因居然是登录按钮使用了v-text，真的太坑了。

解决方案：

<a-button v-text="logging ? '登录中' : '登录'"></a-button>
改成 <a-button>{{ logging ? '登录中' : '登录' }}</a-button>
真的绝望！但是很开心，一个坎又过去了。

三、代理的坑

配置完代理，一切就绪，打开页面却全是500

image.png

百度各种搜，都没找到方案，最后在日志里发现是证书问题：

image.png
解决方案：在proxy中加secure: false

proxy: {
      '/kuailu': {
          ...
          secure: false, 
      }
}