关于使用Vue3+Vite+Lib库模式下Vue-router在外层项目中获取不到实例问题

本文主要是介绍关于使用Vue3+Vite+Lib库模式下Vue-router在外层项目中获取不到实例问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题介绍

我正在使用Vue3+Vite开发一款共享组件库来供多个项目使用，当我在封装一个侧边导航栏组件的时候，使用到了路由跳转相关逻辑，即：

const $route = useRoute();

而我并没有将 vue-router 打入到我的库中去，而是打算依赖于外层项目的 vue-router，即 package.json 中是这样的：

"peerDependencies": {"ant-design-vue": "~3.2.0","vue-i18n": "^9.2.0","vue-router": "^4.0.0"
},

可是当该库编译之后并在外层项目中引用的时候，发现此时的 $route 为 undefined

解决方法

Google了一阵之后发现，在这里发现了遇到了一样的问题

最终发现，只要在 vite.config.ts 中的 rollupOptions 中指定 vue-router 即可正常打包使用，即：

rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ['vue', 'vue-router'],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: 'Vue',},},
},

猜测如下：
当不设置 external 属性时编译库的时候，将 vue-router 相关引用打包到了index中，但由于该依赖是放在 peerDepenencies 中，导致编译的部分无法正常运行，因此外部引用的时候拿到的为 undefined。
而将其指定 external 属性后，编译的时候会自动引入外层的 vue-router，此时可正常执行到相关代码，编译后的index首部如下：

(function(se,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],d):(se=typeof globalThis<"u"?globalThis:se||self,d(se.SharedFrontEndVite={},se.Vue,se.vueRouter))})(this,function(se,d,Fn){"use strict";const ct=d.defineComponent({name:"SharedExample",__name:"Example",setup(e){return(t,n)=>(d.openBlock(),d.createElementBlock("div",null,"这个是示例组件"))}});/*!