CentOS7中搭建nodejs10(VUE)开发环境踩坑指南
Centos7安装npm|nodejs的步骤
阿里的nodejs网站
https://npm.taobao.org/
安装一些必要的库
[root@master ~]# yum install gcc gcc-c++ [hadoop@master Downloads]$ pwd /home/hadoop/Downloads
下载各个版本的,自己根据项目要求,使用对应的版本。
[hadoop@master Downloads]$ wget https://npm.taobao.org/mirrors/node/latest-v12.x/node-v12.0.0-linux-x64.tar.gz [hadoop@master Downloads]$ wget https://npm.taobao.org/mirrors/node/latest-v11.x/node-v11.0.0-linux-x64.tar.gz [hadoop@master Downloads]$ wget https://npm.taobao.org/mirrors/node/latest-v10.x/node-v10.0.0-linux-x64.tar.gz [hadoop@master Downloads]$ wget https://npm.taobao.org/mirrors/node/latest-v9.x/node-v9.0.0-linux-x64.tar.gz
[hadoop@master Downloads]$ pwd /home/hadoop/Downloads [hadoop@master Downloads]$ wget https://npm.taobao.org/mirrors/node/latest-v12.x/node-v12.0.0-linux-x64.tar.gz --2019-10-11 10:07:38-- https://npm.taobao.org/mirrors/node/latest-v12.x/node-v12.0.0-linux-x64.tar.gz Resolving npm.taobao.org (npm.taobao.org)... 114.55.80.225 Connecting to npm.taobao.org (npm.taobao.org)|114.55.80.225|:443... connected. HTTP request sent, awaiting response... 302 Found Location: https://cdn.npm.taobao.org/dist/node/latest-v12.x/node-v12.0.0-linux-x64.tar.gz [following] --2019-10-11 10:07:38-- https://cdn.npm.taobao.org/dist/node/latest-v12.x/node-v12.0.0-linux-x64.tar.gz Resolving cdn.npm.taobao.org (cdn.npm.taobao.org)... 39.156.4.182, 39.156.4.179, 111.32.158.131 Connecting to cdn.npm.taobao.org (cdn.npm.taobao.org)|39.156.4.182|:443... connected. HTTP request sent, awaiting response... 200 OK Length: 20935407 (20M) [application/octet-stream] Saving to: ‘node-v12.0.0-linux-x64.tar.gz’ 100%[=========================================================================================================================================================================>] 20,935,407 3.63MB/s in 5.7s 2019-10-11 10:07:44 (3.49 MB/s) - ‘node-v12.0.0-linux-x64.tar.gz’ saved [20935407/20935407] [hadoop@master Downloads]$ [hadoop@master nodejs]$ pwd /home/hadoop/nodejs [hadoop@master nodejs]$ tar -xzvf ~/Downloads/node-v12.0.0-linux-x64.tar.gz -C . [hadoop@master nodejs]$ tar -xzvf ~/Downloads/node-v11.0.0-linux-x64.tar.gz -C . [hadoop@master nodejs]$ tar -xzvf ~/Downloads/node-v10.0.0-linux-x64.tar.gz -C . [hadoop@master nodejs]$ tar -xzvf ~/Downloads/node-v9.0.0-linux-x64.tar.gz -C .
使用软连接,这样方便日后切换不同的nodejs版本
[hadoop@master nodejs]$ ln -s node-v12.0.0-linux-x64 node [hadoop@master nodejs]$ ls -al total 4 drwxrwxr-x. 3 hadoop hadoop 48 Oct 11 10:12 . drwx------. 75 hadoop hadoop 4096 Oct 11 10:06 .. lrwxrwxrwx. 1 hadoop hadoop 22 Oct 11 10:12 node -> node-v12.0.0-linux-x64 drwxr-xr-x. 6 hadoop hadoop 108 Apr 23 20:38 node-v12.0.0-linux-x64 [root@master ~]# vi /etc/profile #set for nodejs export NODE_HOME=/home/hadoop/nodejs/node export PATH=$NODE_HOME/bin:$PATH [root@master ~]# source /etc/profile [root@master ~]# node -v v12.0.0 [root@master ~]# npm -v 6.9.0 [root@master ~]#
如果当前目录没有【package.json】文件,那么就需要初始化
[hadoop@master nodejs]$ source /etc/profile [hadoop@master nodejs]$ npm init -y Wrote to /home/hadoop/nodejs/package.json: { "name": "nodejs", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } [hadoop@master nodejs]$ vi package.json [hadoop@master nodejs]$ npm install --registry=https://registry.npm.taobao.org up to date in 0.402s
这样是将项目声明为私有,就不会报缺少README文件和仓库字段了
"dev": "webpack-dev-server --inline --hot --open --port 5008" "serve":"vue-cli-service serve", "build","vue-cli-service build", "lint":"vue-cli-service lint" [hadoop@master nodejs]$ npm install --registry=https://registry.npm.taobao.org [hadoop@master nodejs]$ npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) added 385 packages in 5.564s [hadoop@master nodejs]$ ls -al total 164 drwxrwxr-x. 7 hadoop hadoop 202 Oct 11 15:35 . drwx------. 78 hadoop hadoop 4096 Oct 11 15:28 .. lrwxrwxrwx. 1 hadoop hadoop 25 Oct 11 15:34 node -> ./node-v10.0.0-linux-x64/ drwxrwxr-x. 315 hadoop hadoop 12288 Oct 11 15:35 node_modules --->npm install新增加出来的模块(将来重新下载模块,可以直接删除这个目录) drwxrwxr-x. 7 hadoop hadoop 119 Oct 11 15:35 node-v10.0.0-linux-x64 drwxrwxr-x. 6 hadoop hadoop 108 Oct 23 2018 node-v11.0.0-linux-x64 drwxr-xr-x. 6 hadoop hadoop 138 Oct 11 15:34 node-v12.0.0-linux-x64 drwxrwxr-x. 6 hadoop hadoop 108 Nov 1 2017 node-v9.0.0-linux-x64 -rw-rw-r--. 1 hadoop hadoop 659 Oct 11 14:24 package.json -rw-rw-r--. 1 hadoop hadoop 136796 Oct 11 15:35 package-lock.json [hadoop@master nodejs]$ npm install webpack-dev-server -g /home/hadoop/nodejs/node-v12.0.0-linux-x64/bin/webpack-dev-server -> /home/hadoop/nodejs/node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js npm WARN webpack-dev-server@3.8.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/webpack-dev-server/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) + webpack-dev-server@3.8.2 added 390 packages from 268 contributors in 74.896s
安装了cnpm模块后,就可以使用cnpm命令来安装一些其他模块了
[hadoop@master nodejs]$ npm install -g cnpm --registry=https://registry.npm.taobao.org /home/hadoop/nodejs/node-v12.0.0-linux-x64/bin/cnpm -> /home/hadoop/nodejs/node-v12.0.0-linux-x64/lib/node_modules/cnpm/bin/cnpm + cnpm@6.1.0 added 683 packages from 915 contributors in 38.37s [hadoop@master nodejs]$ cnpm install webpack ⠙ [0/1] Installing is-buffer@^1.1.5platform unsupported webpack@4.41.0 › watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(linux) [fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(linux) Installed 1 packages Linked 270 latest versions Run 0 scripts Recently updated (since 2019-10-04): 3 packages (detail see file /home/hadoop/nodejs/node_modules/.recently_updates.txt) All packages installed (297 packages installed from npm registry, used 8s(network 8s), speed 638.93kB/s, json 271(546.65kB), tarball 4.46MB) [hadoop@master nodejs]$ npm install --save-dev webpack [hadoop@master nodejs]$ cnpm install webpack-dev-server [hadoop@master nodejs]$ cnpm install --save-dev webpack-cli [hadoop@master nodejs]$ cnpm install webpack-dev-server -g
永久切换为阿里源
[hadoop@master nodejs]$ npm config set registry https://registry.npm.taobao.org 查询是否切换成功了 [hadoop@master nodejs]$ npm config get registry https://registry.npm.taobao.org/ [hadoop@master nodejs]$ pwd /home/hadoop/nodejs [hadoop@master nodejs]$ find ./ -name webpack*.js
安装webpack
cnpm install webpack -g
安装vue脚手架
npm install vue-cli -g
[hadoop@master nodejs]$ cnpm install webpack [hadoop@master nodejs]$ cnpm install [hadoop@master nodejs]$ cnpm run dev
如果一切正常了,那么就可以启动开发模式了,启动后会卡在这里,并且启动成功后,会打开8080端口,开启一个http的页面,我们访问这个页面,可以看到nodejs的相关目录内容
[hadoop@master nodejs]$ npm run dev > nodejs@1.0.0 dev /home/hadoop/nodejs > webpack-dev-server --inline --progress --config node/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js 40% building 1/2 modules 1 active /home/hadoop/nodejs/node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/index.js?http://localhost:8080ℹ 「wds」: Project is running at http://localhost:8080/ ℹ 「wds」: webpack output is served from / ℹ 「wds」: Content not from webpack is served from /home/hadoop/nodejs 「wdm」: Hash: f13ad31a69df887be4b7 Version: webpack 4.41.0 Time: 518ms Built at: 10/11/2019 2:24:38 PM Asset Size Chunks Chunk Names main.js 365 KiB main [emitted] main Entrypoint main = main.js [0] multi ./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/clients/SockJSClient.js] 3.33 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/index.js?http://localhost:8080] ./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/socket.js] 1.53 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/utils/createSocketUrl.js] 2.89 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/utils/getCurrentScriptSource.js] 658 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/utils/log.js] 964 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/node_modules/ansi-html/index.js] 4.16 KiB {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/node_modules/ansi-regex/index.js] 135 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/node_modules/html-entities/index.js] 231 bytes {main} [built] [./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] 161 bytes {main} [built] [./node_modules/webpack/hot sync ^\.\/log$](webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] + 17 hidden modules ERROR in Entry module not found: Error: Can't resolve './src' in '/home/hadoop/nodejs' ERROR in multi ./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client?http://localhost:8080 ./src Module not found: Error: Can't resolve './src' in '/home/hadoop/nodejs' @ multi ./node-v12.0.0-linux-x64/lib/node_modules/webpack-dev-server/client?http://localhost:8080 ./src main[1] ℹ 「wdm」: Failed to compile.
cd 命令进入eclipse/idea创建的工程目录
[hadoop@master vuesys]$ pwd /home/hadoop/IdeaProjects/vuesys
安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。这个install的命令一定要在eclipse,或者idea的前段代码所在路径进行安装
[hadoop@master vuesys]$ pwd /home/hadoop/IdeaProjects/vuesys [hadoop@master vuesys]$ npm install
不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)
[hadoop@master vuesys]$ cnpm install
如果是已经存在的项目(package.json直接是已经存在的),那么可以尝试直接运行:
[hadoop@master nodejs]$ npm run dev [hadoop@master vuesys]$ ls -al total 120 drwxr-xr-x. 9 hadoop hadoop 4096 Oct 11 15:28 . drwxrwxr-x. 25 hadoop hadoop 4096 Oct 11 14:43 .. -rw-r--r--. 1 hadoop hadoop 337 Oct 11 14:43 .babelrc drwxr-xr-x. 2 hadoop hadoop 200 Oct 11 14:43 build -rw-r--r--. 1 hadoop hadoop 2371 Oct 11 14:43 CHANGELOG.md drwxr-xr-x. 2 hadoop hadoop 78 Oct 11 14:43 config -rw-r--r--. 1 hadoop hadoop 147 Oct 11 14:43 .editorconfig -rw-r--r--. 1 hadoop hadoop 74 Oct 11 14:43 .eslintignore -rw-r--r--. 1 hadoop hadoop 576 Oct 11 14:43 .eslintrc.js -rw-r--r--. 1 hadoop hadoop 212 Oct 11 14:43 .gitignore -rw-r--r--. 1 hadoop hadoop 2670 Oct 11 14:43 gulpfile.js drwxr-xr-x. 2 hadoop hadoop 62 Oct 11 15:20 .idea -rw-r--r--. 1 hadoop hadoop 977 Oct 11 14:43 index.html -rw-r--r--. 1 hadoop hadoop 1057 Oct 11 14:43 LICENSE drwxrwxr-x. 1150 hadoop hadoop 36864 Oct 11 15:28 node_modules ---》新生成的模块目录 -rw-r--r--. 1 hadoop hadoop 3082 Oct 11 14:43 package.json -rw-r--r--. 1 hadoop hadoop 223 Oct 11 14:43 .postcssrc.js -rw-r--r--. 1 hadoop hadoop 8 Oct 11 14:43 README.md drwxr-xr-x. 12 hadoop hadoop 188 Oct 11 14:43 src drwxr-xr-x. 5 hadoop hadoop 46 Oct 11 14:43 static drwxr-xr-x. 4 hadoop hadoop 29 Oct 11 14:43 test -rw-rw-r--. 1 hadoop hadoop 335 Oct 11 15:18 vuesys.iml
安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
启动项目
npm run dev [hadoop@master nodejs]$ npm update -g [hadoop@master nodejs]$ npm update vue-cli
安装一下这个依赖到工程开发环境
cnpm install opn --save-dev cnpm install webpack-dev-middleware --save-dev cnpm install express --save-dev cnpm install compression --save-dev cnpm install sockjs --save-dev cnpm install spdy --save-dev cnpm install http-proxy-middleware --save-dev cnpm install serve-index --save-dev cnpm install connect-history-api-fallback --save-dev cnpm install babel-helpers --save-dev cnpm install babel-traverse --save-dev cnpm install json5 --save-dev
遇到
Module build failed: Error: Cannot find module '模块名'
那就安装
cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)
比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
输入完命令会自动打开浏览器,如果默认打开 IE 不行(这里所有的操作,都是在idea,eclipse的目录中完成的)
[hadoop@master nodejs]$ npm run dev > renren-fast-vue@1.2.2 dev /home/hadoop/IdeaProjects/vuesys > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 26% building modules 134/174 modules 40 active ...adoop/IdeaProjects/vuesys/src/App.vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 37% building modules 233/281 modules 48 active ...sys/src/components/icon-svg/index.vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 40% building modules 258/305 modules 47 active ...ects/vuesys/src/views/main-navbar.vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. ..............................................这里省略很多重复的内容 .............................................. 60% building modules 419/461 modules 42 active ...cts/vuesys/src/views/demo/echarts.vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 66% building modules 512/547 modules 35 active ...omponents/table-tree-column/index.vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 95% emitting DONE Compiled successfully in 14744ms 15:55:09 I Your application is running here: http://localhost:8001
看不到任何错误,并且系统会【自动】把浏览器打开,把首页打开的。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
阿里云MaxCompute 2019-9月刊
您好,MaxCompute 2019.9月刊为您带来9月产品、技术最新动态,欢迎阅读。订阅 MaxCompute 月刊 导读 【重要发布】9月产品重要发布 【文档更新】9月重要文档更新推荐 【干货精选】9月精选技术文章推荐 【重点活动预告】10月重点活动预告 【重要发布】9月产品重要发布 1. MaxCompute元数据服务Information Schema发布 查看详情 >>>Information Schema 以视图方式提供了项目元数据及使用历史数据等信息,用户可自助获取。 适用客户希望利用元数据更好地进行数据管理、作业诊断分析等精细化管理的客户。 发布功能通过系统内建视图的方式,将元数据直接授权给项目Owner访问,可直接查询访问本项目的元数据信息。2. MaxCompute存储降价 查看详情 >>&
- 下一篇
都听我的,会养猪种菜的工程师最帅了! | 10月11号栖夜读
点击订阅云栖夜读日刊,专业的技术干货,不容错过! 阿里专家原创好文 1.都听我的,会养猪种菜的工程师最帅了! 来了!今天,阿里数字农业事业部在黑龙江首次亮相,并且定了一个小目标:到2022年,阿里涉农产品全年网络销售额破4000亿元。黑龙江省牡丹江市的阿里巴巴响水大米种植基地,又到了收割季,数字农业事业部将建立产、供、销三大中台,专注于中国农业的基础设施建设,在全国落地1000个数字农业基地,对农业产业进行全链路数字化升级。为了更好用技术帮助农民增产增收,阿里工程师在不断拓宽新技能:养猪、养蜂、种菜、种瓜... 你别说,还搞得有声有色的。阅读更多》》 2.Java 编程技巧之数据结构 编写代码的"老司机"也是如此,"老司机"之所以被称为"老司机",原因也是"无他,唯手熟尔"。编码过程中踩过的坑多了,获得的编码经验也就多了,总结的编码技巧也就更多了。总结的编码技巧多了,凡事又能够举一反三,编码的速度自然就上来了。笔者从数据结构的角度,整理了一些Java编程技巧,以供大家学习参考。阅读更多》》 3.支付宝 App 是如何建设移动 DevOps 的? 本文系InfoQ对蚂蚁金服技术专家洪锋的...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2整合Redis,开启缓存,提高访问速度
- MySQL8.0.19开启GTID主从同步CentOS8
- Hadoop3单机部署,实现最简伪集群
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16