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

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

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

    比如自己写了比较大的组件,想在 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  
       360 天前
    包是这样生成的
    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
       360 天前
    @abcdxe2v
    用 npm link
    abcdxe2v
        12
    abcdxe2v  
       360 天前
    嗯,npm link 可以,不过我的本来目的是调试未压缩的源代码。所以只用 npm link 不行,还得改配置生成 sourcemap
    abcdxe2v
        13
    abcdxe2v  
       360 天前
    abcdxe2v
        14
    abcdxe2v  
       360 天前
    waiaan
        15
    waiaan  
    OP
       360 天前 via Android
    @abcdxe2v
    npm link 可以直接加载未打包的代码
    abcdxe2v
        16
    abcdxe2v  
       359 天前
    @waiaan 不行吧,不打包直接加载路径不对,比如 @/这种
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5673 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:37 · PVG 14:37 · LAX 22:37 · JFK 01:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.