Nacos-UI

环境版本
环境部署
- 1. 权限不足报错
- 2. 项目环境构建
启动Console-Ui
脱离Console-UI
Console-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中修改后端访问的代理地址

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

以太坊go-ethereum项目源码本地环境搭建
如果要深入了解go-ethereum项目的实现与机制,看源代码是必不可少的.今天这篇博客就简单介绍一下如何在本地搭建项目的开发环境. GO语言环境搭建以win8为例,访问地址https://gola ...
spring5.3.x源码阅读环境搭建
spring5.3.x源码阅读环境搭建-gradle构建编译文章目录 spring5.3.x源码阅读环境搭建-gradle构建编译一.依赖工具二.下载源码三.开始构建四.编译源码五.源码测 ...
spring-framework-5.1.x 源码编译环境搭建 [ idea:2020.1 ]
spring-framework-5.1.x 源码编译环境搭建 [ idea:2020.1 ] 一. Gradle下载与安装软件名称版本下载地址 jdk jdk 11.0.5 下载链接提取码 ...
ardupilot java_基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建
基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建作者:Awesome 日期:2017-10-21 需准备的软件工具 Ardupilot飞控源码 PX4 toolchain JAVA ...
Android源码编译环境搭建教程 (一) - Ubuntu系统构建
Android源码编译环境搭建教程 (一) - Ubuntu系统构建本教程为感兴趣的同学提供Android源码编译的环境搭建,当然这里都是基于windows系统,mac系统也差不多,将相应的软件替换 ...
cl.zk0.info/index.php,兄弟连区块链入门到精通教程btcpool矿池源码分析环境搭建
原标题:兄弟连区块链入门到精通教程btcpool矿池源码分析环境搭建 btcpool矿池-测试环境搭建及使用cgminer测试本文档基于Ubuntu 16.04 LTS, 64 Bits. 安装Bi ...
Mybatis 源码阅读环境搭建
Mybatis源码阅读环境搭建前言一.下载mybatis的源码二.编译源码三.创建测试项目前言 mybatis源码阅读环境搭建还是比较简单的,接下来我们讲解一下如何搭建该源码阅读环境 ...
Spring Boot 2.0系列文章(四)：Spring Boot 2.0 源码阅读环境搭建
前提前几天面试的时候,被问过 Spring Boot 的自动配置源码怎么实现的,没看过源码的我只能投降��了. 这不,赶紧来补补了,所以才有了这篇文章的出现,Spring Boot 2. 0 源码阅 ...
grafana的前端技术_Grafana开发环境搭建
本次介绍一下Mac/Windows环境源码编译步骤. 依赖安装Go 1.11.5(根据不同系统环境选择需要下载的包) 安装sqlite3 (Mac自带,Windows需要自己下载) GO 环境搭建 ...

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

Nacos-UI

环境版本

环境部署

1. 权限不足报错

2. 项目环境构建

启动Console-Ui

脱离Console-UI

Console-UI配置

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

最新文章

热门文章