V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
waiaan
V2EX  ›  Vue.js

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

  •  
  •   waiaan · Mar 12, 2020 · 3619 views
    This topic created in 2242 days ago, the information mentioned may be changed or developed.

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

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

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

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

    这个 tar 地址是什么?
    d1n910
        3
    d1n910  
       Mar 12, 2020
    1、直接 import 这个组件即可吧
    hua123s
        4
    hua123s  
       Mar 12, 2020 via iPhone
    npm link
    waiaan
        5
    waiaan  
    OP
       Mar 12, 2020
    解决了,直接 npm intall 文件夹路径。
    remon
        6
    remon  
       Mar 12, 2020 via Android
    npm 支持 git 库,如果没有自建 npm 又不想发布 npm,可以用 git
    April5
        7
    April5  
       Mar 12, 2020
    如果包在维护的话,我 package.json 会写 git 的地址,然后本地 link 下就好了
    longbo666
        8
    longbo666  
       Mar 12, 2020
    1、文件路径
    2、git 地址
    3、发布到自建仓库
    4、npm link 也行但是每次都得手动操作一下
    charten
        9
    charten  
       Mar 12, 2020
    丢到自己或公司的 git,然后在 package.json 填 git 地址
    abcdxe2v
        10
    abcdxe2v  
       Nov 10, 2023
    包是这样生成的
    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
       Nov 10, 2023
    @abcdxe2v
    用 npm link
    abcdxe2v
        12
    abcdxe2v  
       Nov 10, 2023
    嗯,npm link 可以,不过我的本来目的是调试未压缩的源代码。所以只用 npm link 不行,还得改配置生成 sourcemap
    abcdxe2v
        13
    abcdxe2v  
       Nov 10, 2023
    abcdxe2v
        14
    abcdxe2v  
       Nov 10, 2023
    waiaan
        15
    waiaan  
    OP
       Nov 10, 2023 via Android
    @abcdxe2v
    npm link 可以直接加载未打包的代码
    abcdxe2v
        16
    abcdxe2v  
       Nov 11, 2023
    @waiaan 不行吧,不打包直接加载路径不对,比如 @/这种
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   766 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 21:13 · PVG 05:13 · LAX 14:13 · JFK 17:13
    ♥ Do have faith in what you're doing.