如何在 vue 项目中引用未发布到 npm 上的组件?

2020 年 3 月 12 日
 waiaan

比如自己写了比较大的组件,想在 vue 项目中引入,已经用

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

打包至 dist 文件夹,如何在其它 vue 项目中用这个组件? 谢谢。

4016 次点击
所在节点    Vue.js
16 条回复
hswan
2020 年 3 月 12 日
npm install tar 地址,然后在 main.js 引用就行,跟正常引用 npm 一样,只不过 install 的是 本地 tar 包
waiaan
2020 年 3 月 12 日
@hswan
npm install tar 地址

这个 tar 地址是什么?
d1n910
2020 年 3 月 12 日
1、直接 import 这个组件即可吧
hua123s
2020 年 3 月 12 日
npm link
waiaan
2020 年 3 月 12 日
解决了,直接 npm intall 文件夹路径。
remon
2020 年 3 月 12 日
npm 支持 git 库,如果没有自建 npm 又不想发布 npm,可以用 git
April5
2020 年 3 月 12 日
如果包在维护的话,我 package.json 会写 git 的地址,然后本地 link 下就好了
longbo666
2020 年 3 月 12 日
1、文件路径
2、git 地址
3、发布到自建仓库
4、npm link 也行但是每次都得手动操作一下
charten
2020 年 3 月 12 日
丢到自己或公司的 git,然后在 package.json 填 git 地址
abcdxe2v
2023 年 11 月 10 日
包是这样生成的
vue-cli-service build --target lib --inline-vue --name xxx --dest lib packages/index.js

尝试在另外一个 vue 项目里 main.js 里 import xxx from "C:/Users/xxx/xxx/packages/index.js"
然后 npm run serve ,结果不行,路径不对,@前缀的路径都找不到
waiaan
2023 年 11 月 10 日
@abcdxe2v
用 npm link
abcdxe2v
2023 年 11 月 10 日
嗯,npm link 可以,不过我的本来目的是调试未压缩的源代码。所以只用 npm link 不行,还得改配置生成 sourcemap
abcdxe2v
2023 年 11 月 10 日
abcdxe2v
2023 年 11 月 10 日
waiaan
2023 年 11 月 10 日
@abcdxe2v
npm link 可以直接加载未打包的代码
abcdxe2v
2023 年 11 月 11 日
@waiaan 不行吧,不打包直接加载路径不对,比如 @/这种

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/652099

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX