文章目录

  • 01 引言
  • 02 工具安装
  • 03 编译
  • 3.1 dva版本不兼容
  • 04 启动


01 引言

按照dinky官网的提示来编译启动dinky-web，似乎总会有一些问题，本文按步骤来解决这些问题。

官方的编译步骤：http://www.dlink.top/docs/0.7/deploy_guide/compiler

02 工具安装

官方要求node.js的版本为14.19.0，npm版本为7.19.0。

Mac下编译dinky-web（踩坑篇）_macos


根据官网提示，一般安装了node.js的pkg安装包之后，npm也会自动跟着安装，但是npm的版本不对应，要怎么做呢？下面使用nvm的方式来详细讲解。

首先，按照以下步骤安装 nvm：

## 1. 安装
brew install nvm

## 2. 在home目录中为NVM创建一个文件夹
cd /home
mkdir ~/.nvm

## 3.配置所需的环境变量
vi ~/.bash_profile 
#### 末尾加入并保存
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

## 4. 重新加载bash_profile
source ~/.bash_profile

## 5. 验证（如果有版本号打印出来，表示成功）
nvm  -v

接着可以安装特定版本的node.js了：

# 安装
nvm install 14.19.0
# 验证
node --version

手动更新 npm 版本，运行以下命令以安装 npm 7.19.0：

npm install -g npm@7.19.0
# 验证
npm --version

Mac下编译dinky-web（踩坑篇）_dinky_02


可以看到node.js 以及npm均按照要求安装成功。

为了使npm下载速度更快，可以设置国内镜像源，这里设置淘宝的镜像源

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

03 编译

进入dlink项目下的dlink-web目录，执行：

npm install

3.1 dva版本不兼容

执行之后，发现报了如下错误：

Mac下编译dinky-web（踩坑篇）_前端_03


这个错误，是因为项目使用 ant-design-pro@5.2.0，它依赖于 react@^17.0.0，同时依赖了 dva@2.4.1，但要求使用 react@15.x ~ 16.0.0-0，解决方式就是，更新 dva 到与react@17.x.x兼容的版本。

查看dva所有版本：

npm show dva versions

Mac下编译dinky-web（踩坑篇）_bash_04


看看最新版本对应的react版本要求：

npm view dva@2.6.0-beta.1 peerDependencies

Mac下编译dinky-web（踩坑篇）_macos_05


晕死，上述结果表示以 16.18.4 版本为基础，允许使用相同主版本号的任何更新版本，也没满足要求的react@^17.0.0。

解决这个问题的一种方式是使用 npm 的 --legacy-peer-deps 选项重新安装依赖项，该选项可以使用旧的依赖项解析算法来解决依赖冲突:

npm install --legacy-peer-deps

终于成功了：

Mac下编译dinky-web（踩坑篇）_node.js_06

04 启动

ok，现在可以启动了：

npm start

不出意外的意外，又报错了：

Mac下编译dinky-web（踩坑篇）_node.js_07


根据报错信息，是因为/src/component下的index.md文件报错了，删除，重新start:

Mac下编译dinky-web（踩坑篇）_bash_08

好了，算是启动成功了，直接浏览器输入http://localhost:8000即可登录。