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下载各个版本的,自己根据项目要求,使用对应的版本。

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

看不到任何错误,并且系统会【自动】把浏览器打开,把首页打开的。

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
73 3
|
3月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
52 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
3月前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
617 0
宝塔面板部署Vue项目、服务端Node___配置域名
|
3月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
64 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
4月前
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
|
4月前
|
JavaScript API
Vue——node-ops.ts【十三】
Vue——node-ops.ts【十三】
23 2
|
4月前
|
JavaScript 前端开发 UED
​基于 vue + element plus + node 实现大文件分片上传,断点续传和秒传的功能!牛哇~
​基于 vue + element plus + node 实现大文件分片上传,断点续传和秒传的功能!牛哇~
|
5月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
322 3
|
5月前
|
JavaScript Windows
vue 搭建开发环境(2021版)
vue 搭建开发环境(2021版)
33 1
|
6月前
|
JavaScript
Vue没有node_modules怎么办
Vue没有node_modules怎么办