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

Wrysmile03082023-12-12 15:00

问题介绍

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

ts 复制代码

const $route = useRoute();

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

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 即可正常打包使用，即：

ts 复制代码

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

猜测如下：

当不设置 external 属性时编译库的时候，将 vue-router 相关引用打包到了index中，但由于该依赖是放在 peerDepenencies 中，导致编译的部分无法正常运行，因此外部引用的时候拿到的为 undefined。

而将其指定 external 属性后，编译的时候会自动引入外层的 vue-router，此时可正常执行到相关代码，编译后的index首部如下：

js 复制代码

(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,"这个是示例组件"))}});/*!

可以看到此处 require('vue-router')，因此可以正常执行代码

当然，因为本身对于 rollup 和 Vite 的 lib 模式不太了解，所以该说法也不一定正确，有懂的大佬可以交流讨论下，不对的问题烦请您指出