Dubbo官方提供了一個 admin 的視覺化後臺，可能是整合進Apache，github的Dubbo原專案已經沒有dubbo-admin這個專案已經沒有了，獨立出來做成了一個vue+springboot專案了。

地址：https://github.com/apache/dubbo-admin

dubbo管理控制檯開源部分主要包含： 提供者 路由規則 動態配置 訪問控制 權重調節 負載均衡 負責人，等管理功能

1、啟動後臺專案

後臺專案是dubbo-admin-server，是一個spring-boot專案，直接啟動DubboAdminApplication方法即可。

需要修改zk的地址，配置檔案是application.properties

admin.registry.address=zookeeper://127.0.0.1:2181
admin.config-center=zookeeper://127.0.0.1:2181
admin.metadata-report.address=zookeeper://127.0.0.1:2181

其他註冊中心參考官方文件。

打包：

mvn clean package -Dmaven.test.skip=true

打包成功會在target目錄生成一個jar，直接 java -jar 即可執行。

2、啟動前端專案

前端專案是dubbo-admin-ui ，用vue寫的，需要node環境，需要安裝npm。

npm可以設定一下taobao映象源：

npm config set registry https://registry.npm.taobao.org

開啟 dubbo-admin-ui 目錄的 vue.config.js，自行修改後臺專案的埠和前端專案的埠：

module.exports = {
  outputDir: "target/dist",
  lintOnSave: "warning",
  devServer: {
  //前端專案啟動埠
    port: 8082,
    historyApiFallback: {
      rewrites: [
        {from: /.*/, to: path.posix.join('/', 'index.html')},
      ],
    },
    publicPath: '/',
    proxy: {
      '/': {
      //後臺介面
        target: 'http://localhost:8077/',
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    }
  },
 

上訴設定完畢，執行以下

步驟一：

npm install

步驟二：

npm run dev

如下即啟動成功：

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

  App running at:
  - Local:   http://localhost:8082/
  - Network: http://172.16.44.140:8082/

訪問http://localhost:8082 即可。

賬戶/密碼：root / root

期間遇到了兩個錯誤：

1、錯誤一

error [email protected] serve: `vue-cli-service serve`

dubbo-admin-ui 專案是vue3.0，需要安裝 vue-cli-service

2、錯誤二

Error: Cannot find module 'webpack-merge'

以上兩個錯誤猜測是因為 npm install 的時候沒有安裝成功。

刪除 dubbo-admin-ui 專案的 node_modules 目錄，然後重新執行 npm install 即可。