基于vuecli3多个vue项目公用组件的微前端架构，npm publish发布到私服

公司项目需求，一个系统包含多个子系统，子系统目前跟系统风格基本一致，也有不少公共部分，三年前作过一个相似这种的，拆分出公共项目和子项目分别维护，这也应该算是如今造的名词前端微服务的一种吧，今天把方案再次梳理下（公用模块单独打包成npm，A和B依赖这个公用模块）！

发布包到本身的npm私服

I.npm登录到私服

由于是私服，发布的时候须要先让npm可以登陆上私服才能操做

npm login --registry = http://192.168.1.254:7979/***/
复制代码

在上面命令加上--always-auth，能够记住登陆用户，下次直接发布便可，

接下来依次输入用户名/密码/邮箱 这里须要注意的是，用户名和密码是私服上配置好了的，邮箱不重要，随便都行。

登陆成功后是下面酱

Logged in as dev on http://192.168.1.254:7979/***/
复制代码

II.上传包

npm publish --registry=http://192.168.1.254:7979/***/
复制代码

注意中途不要随意切换文件夹，虽然没有出什么问题，后来想要强制删除的时候一直出错。

III.下载包

操做都是同样的

npm install 包名 --registry=http://192.168.1.254:7979/***/

由于npm私服配置缘由，发布包和下载包的地址有一点差异(public关联snapshots快照)

IV.删除包

记得要加--force

最后路径那里加上本身的包名

还要给登陆到npm私服的用户加上删除的权限

若是有多个版本的包，还须要加上版本号 => 包名@1.0.0

若是公司有jenkins，服务器上使用always-auth登陆后，jenkins构建命令那里直接npm publish 便可

npm login --registry = http://192.168.1.254:7979/***/ --always-auth
复制代码

npm 私服 使用Nexus搭建 问题汇总

运行npm任何命令都是报错 401 unauthorized,不管用管理员仍是超级用户

解决：将包发布到nexus npm仓库须要设置一下 Nexus Repository Manager 的权限。不然没法登录到咱们的私服。在Security->Realms栏目里，将npm Bearer Token Realm 选入Active。

npm publish 报错put 400 bad request

报错缘由： npm的镜像源管理工具nrm 使用的是npm-group 的仓库地址

解决方案： package.json 里面加上 publishConfig: {registry: 发布地址}

项目结构

将登陆和跳转系统页单独抽出一个vue项目，首先在根目录中建立文件index.js，将须要导出的组件写在index.js中，内容示例以下：

import request from './src/common/request'

export {
  request
}
复制代码

公共项目中若是引用此项目下的必定要用相对路径，若是在子系统单独配置，则使用别名@，如图：

子系统使用公共系统中的路径须要如今vue.config.js中配置别名路径

chainWebpack (config) {
    config.resolve.alias.set('@', resolve('src')).set('@module_**', resolve('node_modules/包名/src'))
}
复制代码

vue.config.js中入口文件配置

configureWebpack: config => {
    config.entry.app = ['./node_modules/包名/src/main.ts'];
  },
复制代码

每一个子系统路由的配置：

npm link的使用

开发过程当中，公共系统不免会频繁改动，这时候npm link是最好的选择

首先进入公共系统

npm link
复制代码

其次进入子系统

npm link 包名
复制代码

将这个公共的项目经过软链接的方式引入到项目里面来了。

这时修改公共项目下面的任意代码都会实时生效，不用打包，也不用重启了。

固然，npm link的方式仅建议在功能开发的过程当中使用，若公共模块基本稳定了，仍是建议使用npm publish的方式，将公共包以node_module的方式引入。

结尾彩蛋

欢迎关注前端之阶公众号，获取更多前端知识，加入前端大群，与知名互联网大佬作朋友，开启共同窗习新篇章！