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

2023-12-15 16:55:20

问题介绍

我正在使用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"
},

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

解决方法

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

可以看到此处 require('vue-router'),因此可以正常执行代码
当然,因为本身对于 rollup 和 Vite 的 lib 模式不太了解,所以该说法也不一定正确,有懂的大佬可以交流讨论下,不对的问题烦请您指出

文章来源:https://blog.csdn.net/Wrysmile0308/article/details/134926911
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。