Nacos-UI前端源码本地环境搭建，打包

      Nacos Console模块与Console-ui没有直接关联关系，Console启动后读取的是Console -> resource下的static静态文件。
      Console-ui 使用的是react，Console-ui与Nacos可以进行前后端分离部署，亦可再改造之后，build打包，将dist丢到Console static public下，启动Console无需Console-UI亦可访问配置文件管理后台。

• 环境版本

        Nacos console-ui readme中推荐的版本是node 8.16.0 npm 6.4.1，实际在实践的时候，由于版本过低，无法初始化依赖。经实践，以下node版本可成功。

        其他版本构建时若出现以下错误，唉！换个node版本重装吧（目前还未找到好的解决办法），网友说是版本管理的问题

  
  npm ERR! Error: No compatible version found: gulp-uglify@'^1.0.0'
  npm ERR! Valid install targets:
  npm ERR! ["0.0.1","0.0.3","0.0.4","0.1.0","0.2.0","0.2.1","0.3.0","0.3.1","0.3.2","1.0.0-0","1.0.0"]
  npm ERR!     at installTargetsError (D:\toolkit\nodejs\node_modules\npm\lib\cache.js:689:10)
  npm ERR!     at D:\toolkit\nodejs\node_modules\npm\lib\cache.js:611:10
  npm ERR!     at saved (D:\toolkit\nodejs\node_modules\npm\node_modules\npm-registry-client\lib\get.js:138:7)
  
  

       Nacos-Server 2.0.3 源码
       Node 10.11.0      Npm 6.4.1      10.11.0下载地址

• 环境部署

  node 安装就不说了，下载10.11.0 msi包，点击即可安装。
  安装完毕，指定镜像地址，node官网下载包太慢了

  npm config set registry=http://registry.npm.taobao.org 配置镜相 npm config list 可查看配置信息

  1. 权限不足报错

       进入到C:\Program Files\nodejs\node_modules\npm 目录夹下，执行npm install 初始化依赖包 （可以不用做）

       出现以下图片报错，即是当前操作没有权限，用管员权限打开CMD命令窗口即可
  
  

  2. 项目环境构建

       进入D:\IdeaProject\nacos-2.0.3\console-ui\src 即Console-Ui 模块的src目录夹下执行npm install初始化项目依赖
        install 过程中若出现以下类型的错误，node-sass@4.14.1 / 名称+版本号，均是依赖未成功下载，或者解析。设置一下镜像，再install即可。

  npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the node-sass@4.14.1 postinstall script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  

• 启动Console-Ui

        Console-Ui模块依赖初始化 npm install执行成功以后，进入到console-ui一级目录，npm start执行启动命令。
        启动时一值刷以下 loose 信息，不用管，有强迫症的可以解决一下。

  [HPM] Proxy created: [ '/' ]  ->  http://localhost:8848
  [HPM] Proxy rewrite rule created: "^/v1" ~> "/nacos/v1"
  i ｢wds｣: Project is running at http://localhost:8000/
  i ｢wds｣: webpack output is served from /
  i ｢wds｣: Content not from webpack is served from D:\IdeaProject\nacos-2.0.3\console-ui
  i ｢wdm｣: wait until bundle finished: /
  ............
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  to the "plugins" section of your Babel config.
  Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
  The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
  
  

        下图所示，即Console-UI前端独立启动成功，启动端口8000。这时候进行访问会报错，因为后端还没启动
        后台点开Nacos Console，启动console，端口8848，至此前端在本地部署，启动即完成了。
  

• 脱离Console-UI

        Nacos Console启动后，不访问Console-Ui，8848端口访问前端页面也是可以的，因为Console中集成了Console-UI的编译文件。
        进入Console-UI一级目录执行 npm run build 。默认在nacos-console/src/main/resources/static/css 和js下，会生成修改后的样式，和js文件。

• Console-UI配置

       console-ui/build/copyFile.js中配置，修改默认打包生成文件位置
       console-ui/build/webpack.dev.conf.js中修改后端访问的代理地址