记录：375
场景：在CentOS 7.9操作系统上，使用apache-maven-3.8.7安装编译datax-web-ui源码。在Windows上操作系统上，使用apache-maven-3.8.7编译datax-web-ui源码。
版本：
JDK 1.8
node-v14.17.3
npm-6.14.13datax-web-ui开源地址：https://github.com/WeiYe-Jing/datax-web-ui
一、在Linux上编译datax-web源码
1.安装nodejs和npm
1.1下载地址
官网地址：https://nodejs.org/dist
本例版本：https://nodejs.org/dist/v14.17.3/node-v14.17.3-linux-x64.tar.gz
1.2下载包
命令：wget https://nodejs.org/dist/v14.17.3/node-v14.17.3-linux-x64.tar.gz
解析：下载包名称node-v14.17.3-linux-x64.tar.gz。
1.3解压包
解压命令：tar -zxvf node-v14.17.3-linux-x64.tar.gz -C /usr/local/
解析：-C是解压到指定目录。解压后的目录：/usr/local/node-v14.17.3-linux-x64。
重命名目录：mv /usr/local/node-v14.17.3-linux-x64 /usr/local/nodejs
解析：node相关包就安装到了/usr/local/nodejs下。
1.4配置node、npm命令全局可用
方式一：
命令：ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
命令：ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
解析：配置node、npm命令全局可用，实际就是把node和npm创建软链接到/usr/local/bin/目录。系统搜索命令时，默认会到/usr/local/bin/查找命令。
方式二：
命令：ln -s /usr/local/nodejs/bin/node /usr/bin/node
命令：ln -s /usr/local/nodejs/bin/npm /usr/bin/npm
解析：配置node、npm命令全局可用，实际就是把node和npm创建软链接到/usr/bin/目录下。系统搜索命令时，默认会到/usr/bin/查找命令。
1.5配置镜像源
查看当前镜像源：npm get registry
设置为淘宝源：npm config set registry https://registry.npm.taobao.org
设置为官方源：npm config set registry http://www.npmjs.org
2.创建Linux普通用户
使用npm编译前端代码，需普通用户操作。
2.1新建用户
命令：useradd frontend
2.2修改密码
命令：passwd
解析：在执行passwd命令时，会提示输入密码。
3.下载源码
命令：wget https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.tar.gz
解析：下载包名是v-2.1.2.tar.gz。
4.解压包
命令：tar -zxvf v-2.1.2.tar.gz -C /home/apps/dx
命令：mv datax-web-ui-v-2.1.2 datax-web-ui
解析：-C解压到指定目录。把datax-web-ui-v-2.1.2重命名为datax-web-ui。
5.更改目录权限
把datax-web-ui目录权限赋个一个普通用户来执行，不使用root执行。
5.1更改目录权限
命令：chown -R frontend:frontend /home/apps/dx/datax-web-ui
5.2报错解决
npm install命令使用root安装编译前端代码时，报错提示权限问题。
报错：gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/apps/dx/datax-web-ui/node_modules/node-sass/.node-gyp'。
解决：创建一个普通用户frontend，使用普通用户安装编译。
原因：npm基于安全考虑不支持以root用户运行。当使用root用户身份运行时，npm会自动转成nobody的用户来运行，而这个用户几乎没有任何权限。因此，报错没有mkdir权限。
6.安装
操作目录：/home/apps/dx/datax-web-ui
6.1安装
安装：npm install
解析：执行npm install，会把从远程镜像仓库加载依赖包下载到本地的node_modules中。
6.2报错解决
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
解决：git config --global url."https://".insteadOf git://
7.启动
7.1修改端口
修改文件：vi vue.config.js
修改内容：
const port = 18080
const apiPort = 18081解析：18080是前端应用端口；18081是后端应用端口。
7.2启动
命令：npm run dev
解析：使用npm run运行代码。
8.打包
8.1打包
命令：npm run build:prod
8.2结果输出目录
输出目录：/home/apps/dx/datax-web-ui/dist
解析：dist目录下的文件就是前端代码编译的结果，可以直接使用。
9.登录
启动成功过后，可以登录。
9.1登录页面
网址信息：http://192.168.19.203:18080/
用户/口令：admin/123456
9.2首页
从登录页到首页是从前端服务调用后端服务。
二、在Windows上编译datax-web源码
1.安装nodejs和npm
1.1下载地址
官网地址：https://nodejs.org/dist
本例版本：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
1.2下载包
下载地址：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
解析：下载包名称node-v14.17.3-x64.msi。
1.3安装
根据安装向导安装即可。
本例安装目录：D:\Program Files\nodejs
在安装目录下，已经包含了node和npm。
1.4配置环境变量
依次点击和选择：此电脑->属性->高级系统设置->环境变量->系统变量
变量名称：Path
添加变量：D:\Program Files\nodejs\
2.下载源码
下载发布版本datax-web-ui-v-2.1.2。
源码地址：https://github.com/WeiYe-Jing/datax-web-ui/
2.1浏览器直接下载
地址：https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.zip
解析：直接在浏览器中输入地址就能下载。
2.2使用Git下载
命令：git clone git@github.com:WeiYe-Jing/datax-web-ui.git
3.解压包
解压包到：D:\dev\ForDx\datax-web-ui
4.安装包
操作目录：D:\dev\ForDx\datax-web-ui
4.1安装
安装：npm install
解析：执行npm install，会把从远程镜像仓库加载依赖包下载到本地的node_modules中。
4.2报错解决
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
解决：git config --global url."https://".insteadOf git://
4.3安装慢解决
切换为淘宝镜像源，提升下载速度。。
查看当前镜像源：npm get registry
设置为淘宝源：npm config set registry https://registry.npm.taobao.org
设置为官方源：npm config set registry http://www.npmjs.org
5.启动
5.1修改端口
修改文件：vi vue.config.js
修改内容：
const port = 8080
const apiPort = 8081解析：8080是前端应用端口；8081是后端应用端口。
5.2启动
命令：npm run dev
解析：使用npm run运行代码。
6.打包
6.1打包
命令：npm run build:prod
6.2结果输出目录
输出目录：D:\dev\ForDx\datax-web-ui\dist
解析：dist目录下的文件就是前端代码编译的结果，可以直接使用。
7.登录
启动成功过后，可以登录。
网址信息：http://127.0.0.1:8080/
用户/口令：admin/123456
以上，感谢。
2023年2月11日
