阅读 3604

基于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的方式引入。

结尾彩蛋

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

文章分类
前端
文章标签