abpVNext 如何在vue3中使用angular代理的依赖注入

         abp最方便的莫过于它提供了一套完整的脚手架，给新手以方向，给老手以时间。在众多方便的功能中莫过于生成angular的proxy代理（js代理无类型提示），如何在vue3中使用typescript的proxy呢。

        本文主要设计三个知识点。

1. 符号链接

2. 替换核心实现
   

首先符号链接功能可参考pnpm的实现方式，源文件在其他项目中，并不在根目录中，我们可通过符号链接，让编译器认为在根目录中。通过angular生成的proxy在angular目录中（必须在angular根目录里面才能生成typescrpt代理），以下为生成代理及符号链接的命令。

此时，proxy文件夹已经在vue3根目录下，可以通过tsc的路径引用添加快捷路径，由于proxy问价夹里面包含了@abp/ng.core和@angular/core的引用，所以需要通过tsc和webpack进行替换。

tsconfig.json

package.json

代码中出现的mockAbp和mockNg是@abp/ng.core和@angular/core的替换实现。

这里主要说两个文件rest.service.ts和injectable.ts文件，其他文件可以从源码直接复制，

rest.service.ts主要实现了http请求，代码如下。主要进行了实现替换，注意angular版本为返回为Observable，这里返回为Promise，也可修改为返回Observable,在vue3中类型提示为Promise，同时下面代码接入了部分angular的interceptor功能，以实际情况调整。

injectable.ts主要实现了vue3的依赖注入功能，需要获取vue3的app全局实例，这样才能实现全局注入，这里需要更改服务类名称，因为在打包的时候会丢失这些信息。

以上步骤完成后，在vue文件中即可注入以上服务，如下所示。