一、背景

刚入职了一家新公司，摸鱼式的把每个项目都打开看了下。不够五分钟便惊出了一身冷汗，午饭时分，便和领导聊了下这些项目中的通病。其中就有一个问题就是代码复用的问题，一个Vue文件6000多行代码，多个文件中还有很多重复的代码。领导听了休息了片刻便拍案而起，好的小陈你就把这几个类似的页面抽出来吧！我:。。。。默默扒饭。

二、问题和方案

类似登录页这种几百年不变的页面，多个项目不管是逻辑还是UI基本上都是一样的，多个项目要用。虽然CV也挺快，但是如果逻辑一改的话，yi那其实还是挺麻烦的。（领导视角）

方案一：Iframe嵌入主项目❌

一开始是想把要引入的页面打包然后通过Iframe引入，但是这样的话会存在域不同的问题，而无法随心所欲的操作本地存储之类的东西。虽然可以用postMessage的方法进行通信传输数据，但是要传输到主页面的信息一多的话，很难分清楚哪个数据是所需要的。在尝试了半天之后，PASS了这个方案。

方案二：将页面打包成组件，然后在主项目中注册且使用✔

通过采用lib库模式打包Vue页面为组件，然后在主项目中引入，便可以实现页面的复用。然后引入组件也可以自由的访问本地存储等东西。
打包命令：

vue-cli-service build --target lib --name main --dest lib src/components/index.js

详情可以参考官网的指南
构建目标 | Vue CLI (vuejs.org)

接下来便是痛苦且折磨的试错之路😖

初步实现

接下来看下这两个文件的具体内容

Main下面的index.js

components下面的index.js

看了下这两个文件的内容，写过Vue插件的铁铁们应该都很熟悉，对其实就是把页面当成组件了。有的铁铁举手问，小陈那个initRouter是啥呀，小陈后面为铁铁们解答，我们一步一步慢慢实现。

Main页面如下

接下来便是通过命令行打包成组件的步骤了

现在打包的项目这边的任务就告一段落，后面我们看下主项目要如何引用这个被打包的组件。

只需要在主项目的main中注册我们打包的组件就可以使用了，然后结构出来的Main和About正是刚才我们在components下index.js暴露的两个组件，componentPage则是components下index.js暴露的默认的install方法用于注册。启动下主项目试试就发现我们引入的两个组件都加到主项目路由里面去了。心头一甜但是隐约觉得事情没这么简单。😱

三、遇到的问题及解决策略

问题、组件需要使用主项目的路由

以登录页为例子，在用户验证完身份之后，需要跳转到主项目中的其他页面。例如跳转home需要跳转到主项目的home页面，在主项目中点击会报错，因为组件路由根本没有这个路由配置，所以需要把主项目的路由引入到组件中，那要怎么做捏？容小陈慢慢解释。

解决：在注册的时候引入主项目的路由

通过initRouter在注册组件的时候，把主项目的路由引入到组件中，然后在需要使用主项目路由的时候，使用getCurRouter给组件路由赋值成主项目的路由即可。只不过在使用router的js文件都需要使用getCurRouter。Vue文件中则不需要做任何配置，因为this.router/this.route访问的均是主项目的路由。

组件的路由文件配置

组件下components的index.js配置

Main中跳转的方法

顺便一提：判断生产还是开发环境都是为了开发的时候，不用做额外的配置，只是方法比较笨。如果大佬们有更好的方法麻烦踢一下小陈。

总结

这是小陈第一次在掘金上写文章，可能这篇文章的作用不是很大，但也是记录小陈解决问题的载体。文章有啥不清楚的或者不合理的地方还麻烦铁铁们和小陈促膝长谈。但是此次的实践还是让小陈对Vue的一些知识这块有了新的理解。然后日后还请大佬们多多指教。

Demo的地址: only-for-test: 仅用来测试的仓库 (gitee.com)