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

結尾彩蛋

歡迎關注前端之階公衆號，獲取更多前端知識，加入前端大羣，與知名互聯網大佬作朋友，開啓共同窗習新篇章！