V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waiaan
V2EX  ›  Vue.js

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

  •  
  •   waiaan · 2020-03-12 10:51:12 +08:00 · 3027 次点击
    这是一个创建于 1727 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    16 条回复    2023-11-11 16:26:23 +08:00
    hswan
        1
    hswan  
       2020-03-12 11:00:32 +08:00
    npm install tar 地址,然后在 main.js 引用就行,跟正常引用 npm 一样,只不过 install 的是 本地 tar 包
    waiaan
        2
    waiaan  
    OP
       2020-03-12 11:05:45 +08:00
    @hswan
    npm install tar 地址

    这个 tar 地址是什么?
    d1n910
        3
    d1n910  
       2020-03-12 11:08:01 +08:00
    1、直接 import 这个组件即可吧
    hua123s
        4
    hua123s  
       2020-03-12 11:11:14 +08:00 via iPhone
    npm link
    waiaan
        5
    waiaan  
    OP
       2020-03-12 11:31:11 +08:00
    解决了,直接 npm intall 文件夹路径。
    remon
        6
    remon  
       2020-03-12 11:34:17 +08:00 via Android
    npm 支持 git 库,如果没有自建 npm 又不想发布 npm,可以用 git
    April5
        7
    April5  
       2020-03-12 11:35:24 +08:00
    如果包在维护的话,我 package.json 会写 git 的地址,然后本地 link 下就好了
    longbo666
        8
    longbo666  
       2020-03-12 15:24:41 +08:00
    1、文件路径
    2、git 地址
    3、发布到自建仓库
    4、npm link 也行但是每次都得手动操作一下
    charten
        9
    charten  
       2020-03-12 20:15:25 +08:00
    丢到自己或公司的 git,然后在 package.json 填 git 地址
    abcdxe2v
        10
    abcdxe2v  
       2023-11-10 14:39:47 +08:00
    包是这样生成的
    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
        11
    waiaan  
    OP
       2023-11-10 15:03:49 +08:00
    @abcdxe2v
    用 npm link
    abcdxe2v
        12
    abcdxe2v  
       2023-11-10 16:17:10 +08:00
    嗯,npm link 可以,不过我的本来目的是调试未压缩的源代码。所以只用 npm link 不行,还得改配置生成 sourcemap
    abcdxe2v
        13
    abcdxe2v  
       2023-11-10 16:17:24 +08:00
    abcdxe2v
        14
    abcdxe2v  
       2023-11-10 16:20:07 +08:00
    waiaan
        15
    waiaan  
    OP
       2023-11-10 17:13:08 +08:00 via Android
    @abcdxe2v
    npm link 可以直接加载未打包的代码
    abcdxe2v
        16
    abcdxe2v  
       2023-11-11 16:26:23 +08:00
    @waiaan 不行吧,不打包直接加载路径不对,比如 @/这种
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1023 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:53 · PVG 04:53 · LAX 12:53 · JFK 15:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.