避免在搭建鲁班H5本地项目中踩到的陷阱

今天想在本地研究学习学习鲁班的开源项目，于是乎手欠的开始搭环境......

github地址

官方文档

鲁班H5是什么？

鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度 H5 等工具

咱也是听话，安装官方文档一步一步来。官方推荐了三种方法，我用了前两种：

一、一键脚本（官方推荐！）

git clone https://github.com/ly525/luban-h5 && cd luban-h5
# 安装依赖，构建前后端（安装依赖会耗时略长，请耐心等待）
# 咱也没想到是漫长的等待

./luban-h5.sh init
# 启动项目访问 http://localhost:1337 即可

./luban-h5.sh start
# ./luban-h5.sh stop

项目初始化成功，start之后等了好久启动不来，放弃了（有耐心的可以多等等，也可能是我的方法有问题）

二、本地安装了 Node、Yarn

这里一定要注意，是yarn,是yarn,是yarn,npm 不好使。 继续安装yarn

npm install yarn -g

但是一直报错

/usr/local/lib/node_modules/yarn/lib/cli.js:46099
let {
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions…js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/usr/local/lib/node_modules/yarn/bin/yarn.js:24:13)
at Module._compile (module.js:410:26)
at Object.Module._extensions…js (module.js:417:10)

如果你的yarn出现这个问题,问题出在nodejs，nodejs跟yarn冲突了,需要更换node版本。

接着，更换node问题来了，有两种方法：1.直接在官网下载想要安装的版本，覆盖之前的版本，记得路径不一致的时候还需配置环境变量；2.使用nvm切换不同node版本，安装nvm需要先卸载本地node环境。个人喜欢nvm方式，可以切换不同版本，比起每次去官网down更便捷。

准备工作做好了，可以开始安装依赖，启动项目

git clone https://github.com/ly525/luban-h5
cd luban-h5 # 项目根目录

# 后端
cd back-end/h5-api && yarn && yarn dev

# 前端
# 新开一个终端，在项目根目录执行如下命令
cd front-end/h5 && yarn && yarn build:engine && yarn dev

第二个方法需要启动前端跟后端，依赖经过很长时间下载完了，启动项目报错，根据提示信息安装对应的包即可。最后终于启动了，接口报错,庆幸官方给出了答案：

本地开发，如果后端接口报错 403 Forbidden，请按照下图的操作，打开接口的访问权限接口：[Roles And Permission] -> [Public] - [Permissions]

啊啊，太不容易终于跑起来了。最难以忍受的是下载太慢，装好之后结果在官网找到了镜像【因为 yarn 的仓库源在海外，所以，请配置国内镜像源，提高速度】

> yarn config get registry
> # -> https://registry.yarnpkg.com

> # 改成 taobao 的源：
> yarn config set registry https://registry.npm.taobao.org
> # -> yarn config v0.15.0
> # -> success Set "registry" to "https://registry.npm.taobao.org".

# 看到 succes 表示安装完毕

deploy>mirror.sh 文件有各种镜像链接，需要的可以进行自我安装。也可直接运行本文件安装全部。

---

今天采坑略多，以后还需多看官网。