关于使用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"
},
可是当该库编译之后并在外层项目中引用的时候,发现此时的 $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,"这个是示例组件"))}});/*!
可以看到此处 require('vue-router')
,因此可以正常执行代码
当然,因为本身对于 rollup 和 Vite 的 lib 模式不太了解,所以该说法也不一定正确,有懂的大佬可以交流讨论下,不对的问题烦请您指出
文章来源:https://blog.csdn.net/Wrysmile0308/article/details/134926911
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!