初始化启动element过程踩坑

604 阅读3分钟

为什么要去修改比较成熟的ElementUI

前期VUE项目用到了ElementUI,UI大改版,部分组件样式不符合需求,鉴于开发团队很小,只能基于ElementUI做出修改和自定义一些。

本以为很常规很轻松的一个工作项,却还是踩了很多坑。

clone代码的低级错误 🧠被吃了

github进到element项目,默认是dev分支,需要切换到master分支,避免很多因为版本意料之外的错误耽误时间。

启动过程中的坑

npm i npm run dev 之后一直有一个node-gyp报错 # gyp: No Xcode or CLT version detected! 查找之后这个是Mac的一个报错

mac os 10.15的特别提醒发现,node-gyp需要Xcode Command Line Tools。原来原因出在这,查找解决方案之后通过以下方式解决。

1.删除已经安装的CommandLineTools $ sudo rm -rf $(xcode-select -print-path)

2.重新安装 $ sudo xcode-select --install

直接xcode-select --install不生效,发现官方文档在最后还给出了以上方式不生效,可以采用sudo rm -rf $(xcode-select -print-path)解决,直接输入管理员密码,没有output就是正常的,再进行xcode-select --install即可。

安装完成周重启,看是否还报以下错误

libtool: unrecognized option `-static'
libtool: Try `libtool --help' for more information.
make: *** [Release/sass.a] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/tomcat/project/spring-cloud-codegen-ui/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:194:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Darwin 15.6.0
gyp ERR! command "/usr/local/Cellar/node/5.8.0/bin/node" "/usr/local/tomcat/project/spring-cloud-codegen-ui/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/local/tomcat/project/spring-cloud-codegen-ui/node_modules/node-sass
gyp ERR! node -v v7.8.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
Build failed with error code: 1
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/5.8.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1

npm ERR! node-sass@4.7.2 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-sass@4.7.2 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/root/.npm/_logs/2018-01-03T01_21_29_137Z-debug.log

显示node-sass安装失败,原因可能是安装 node-sass 依赖时,会从 github.com 上下载 .node 文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。 这个问题,可以使用淘宝镜像uninstall之后重新安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

👀 至此项目可以正常启动起来了

希望给您的开发和学习带来了一些帮助,如果有,点个赞吧,如果没有,我再努力啦!整理过程中发现社区控制台打印的一句话 “不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高”,2021年的最后一天,小学僧和掘友共勉。