多个vue项目公共组件的三种方法

这篇文章就来介绍前端多个vue项目用一个组件三种方法，npm发布引用、npm link、npm本地file引用，其中本文主要推荐本地file引用方式

方案一：npm发布引用

我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。
发布流程如下：

在注http://www.npmjs.com册一个账号
进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码
输入命令 npm publish 即可
当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。需要注意的是，若报错你没有权限发布该项目，那应该就是你的这个项目名被别人用过了，在package.json中修改下项目名再发布吧。

开发project1和project2的程序猿通过npm install命令将common以node_module的方式引入

npm install common --save

另外，每次改动代码再次发布时，需要修改package.json文件中的版本号，不然发布不成功。

这样开发project1和project2的程序猿只需关注自己项目的业务功能，公共的common有更新时，执行命令npm install common就可以了。

不过这个方案的问题，频繁改动common包时，project1和project2需要频繁更新common包的引入。

方案二：npm link

首先进入common包，在控制台输入

npm link

这会创建一个软连接，并保存到目录C:UsersAdministratorAppDataRoaming pm ode_modules下面。

然后进入project1和project2，在控制台输入

npm link common

这就将这个公共的项目通过软连接的方式引入到项目里面来了。下图可以看到在node_modules中common包和其他的包文件夹样式是不一样的，common文件夹只是一个软链接。

这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。

需要注意的是，当项目包依赖更新后，也就是执行了 npm install xxx 之后，需要重新link common项目。而且使用npm link后本地package.json里没有记录，无法直观的查看本地包的引用。

方案三：npm本地file引用（推荐）

分别进入project1和project2，在控制台输入命令：

npm install ../common/

其中…/common/是common的相对路径，这里也可以输入绝对路径。

这样就将common这个工程以node_module的方式引入到project1和project2项目中了。可以正常使用common在index.js中导出的组件了。

命令执行完后，package.json里会多一条记录

 "dependencies": {
    "common": "file:../common",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "we-vue": "^2.3.3"
  },

也可以在package.json里加上"ak-commonjs": “file:…/common” 这一行再执行npm install命令。

同样这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。而且在package.json中有引入记录。

引入公共组件
公共组件创建好了，需要引入，引入代码和引入其他组件的方式一样，代码如下：

<template>
  <div class="hello">
    <h1 style="text-align: center;">{{ msg }}</h1>
    <player-picker :audios="audios"></player-picker>
  </div>
</template>
<script>
import { playerPicker } from 'common'
export default {
  name: 'HelloWorld',
  components: { playerPicker },
  data () {
    return {
      msg: '音乐播放器',
      audios: [{
        audioSrc: 'https://m801.music.126.net/20191121202654/e1b93f2bbd9a741dbb6afb2fba7fab8d/jdyyaac/010b/5359/565d/6a7ed7d40cd34dea3ddda7779a460973.m4a',
        duration: 326,
        title: '天涯'
      }, {
        audioSrc: 'http://audio04.dmhmusic.com/71_53_T10041182782_128_4_1_0_sdk-cpm/cn/0208/M00/31/B1/ChR461plD6yARfTFAEEIKD_hxsU439.mp3?xcode=8a44d93c492e630856e62a602d6c4faf12cc3f2',
        duration: 266,
        title: '伤心太平洋'
      }, {
        audioSrc: 'http://audio04.dmhmusic.com/71_53_T10041184599_128_4_1_0_sdk-cpm/cn/0208/M00/31/B5/ChR47FplIpCAEaVVAEZqHtp44Ks826.mp3?xcode=e8a16a5aa7bb2e5b56e57822bb09de2b96fca9a',
        duration: 288,
        title: '难念的经'
      }]
    }
  }
}
</script>

————————————————
本文转载自CSDN博主「milugloomy」的原创文章，原文链接：https://blog.csdn.net/milugloomy/article/details/103187370

转载于：https://blog.csdn.net/qq_37568942/article/details/121153562