人人vue npm install报错解决方案

1.下载配置nvm

1.1 配置源

安装好nvm后,在setting.txt配置好源

node_mirror: https://npmmirror.com/mirrors/node
npm_mirror: https://npmmirror.com/mirrors/nvm

1.2 安装node 10.16.3

在有管理员权限的cmd窗口输入命令

nvm install 10.16.3

安装完成后,输入以下命令,切换到10.16.3版本

nvm use 10.16.3

2.启动人人fast-vue

2.1 下载人人fast-vue

下载链接:renren

2.2 修改依赖版本

将node-sass修改为4.14.1

sass-loader修改为6.0.6

最后的packpage.json文件为

{
  "name": "renren-fast-vue",
  "version": "1.2.2",
  "description": "renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端功能,提供一套更优的前端解决方案。",
  "author": "daxiong.yang <daxiong.yang@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "gulp"
  },
  "dependencies": {
    "axios": "0.17.1",
    "babel-plugin-component": "0.10.1",
    "babel-polyfill": "6.26.0",
    "element-ui": "2.8.2",
    "gulp": "4.0.2",
    "gulp-concat": "2.6.1",
    "gulp-load-plugins": "2.0.5",
    "gulp-replace": "1.0.0",
    "gulp-shell": "0.8.0",
    "lodash": "4.17.5",
    "node-sass": "^4.14.1",
    "npm": "^6.9.0",
    "sass-loader": "6.0.6",
    "svg-sprite-loader": "3.7.3",
    "vue": "2.5.16",
    "vue-cookie": "1.1.4",
    "vue-router": "3.0.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "7.1.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "21.0.2",
    "babel-loader": "7.1.1",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
    "babel-plugin-transform-runtime": "6.22.0",
    "babel-preset-env": "1.3.2",
    "babel-preset-stage-2": "6.22.0",
    "babel-register": "6.22.0",
    "chalk": "2.3.0",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "4.0.1",
    "cross-spawn": "5.0.1",
    "css-loader": "0.28.0",
    "eslint": "3.19.0",
    "eslint-config-standard": "10.2.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.7.1",
    "eslint-plugin-html": "3.0.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.2.0",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "1.1.4",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
    "jest": "21.2.0",
    "jest-serializer-vue": "0.3.0",
    "nightwatch": "0.9.12",
    "node-notifier": "5.1.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.2.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.8",
    "rimraf": "2.6.0",
    "selenium-server": "3.0.1",
    "semver": "5.3.0",
    "shelljs": "0.7.6",
    "uglifyjs-webpack-plugin": "1.1.1",
    "url-loader": "0.5.8",
    "vue-jest": "1.0.2",
    "vue-loader": "13.3.0",
    "vue-style-loader": "3.0.1",
    "vue-template-compiler": "2.5.16",
    "webpack": "3.6.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-dev-server": "2.9.1",
    "webpack-merge": "4.1.0"
  },
  "engines": {
    "node": ">= 8.11.1",
    "npm": ">= 5.6.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2.3 安装依赖

npm install 安装依赖

2.4 chromedriver安装出问题

安装过程中报chromedriver相关的报错,则先自己下载chromedriver文件,下载链接:https://registry.npmmirror.com/-/binary/chromedriver/2.27/chromedriver_win32.zip

下载完成后,执行以下命令即可完成安装,包路径需要替换为自己刚下载的地方

npm install chromedriver --chromedriver_filepath="D:\XXXXX\chromedriver_win32.zip"

2.5 node-sass安装出问题

先下载node-sass 的win32-x64-64_binding.node文件,下载链接如下

https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-64_binding.node

下载完成后,把文件改名为binding.node放在项目中的node_modules/noda_sass/vendor/win32-x64-64下

之后执行

npm rebuild node-sass

如果报错,可能是因为本地没有python环境,我本地为python3.7,可进行参考

2.6 启动项目

处理完以上错误,执行npm run dev可顺利启动项目

  • 26
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 很抱歉, 我无法提供中文服务。 但是我可以尝试用英文来帮助您解决这个问题。 当您使用 `vue npm install` 命令并遇到错误时, 一种常见的原因是连接到 npm registry 时出现了问题。这可能是由于您的网络连接出现了问题或者由于您使用了不正确的 registry 地址导致的。 您可以尝试使用下列命令来清空缓存并重新连接到 registry: ``` npm cache clean --force npm set registry https://registry.npmjs.org/ ``` 如果这些步骤还是无法解决问题, 建议您尝试以下操作: - 确保您的 npm 版本是最新的。 - 尝试使用 yarn 代替 npm 进行安装。 - 尝试使用代理进行安装, 可以在命令行中使用 `npm --proxy http://proxy-server:port install package-name`。 - 如果以上操作均无效, 您可以尝试删除 package-lock.json 文件并重新安装。 希望这些建议能帮助您解决问题。如果您还有其他疑问, 请随时联系我。 ### 回答2: 当我们在使用Vue时,有时候会遇到npm install命令报错的情况。这种情况可能是由于网络问题、权限问题、包版本不匹配等原因所引起。 首先,我们可以检查一下网络连接是否正常。可以尝试使用其他的网络环境或使用代理来进行安装。如果网络连接没有问题,我们可以尝试清除npm的缓存,使用以下命令: ``` npm cache clean --force ``` 接下来,我们可以检查一下项目的权限设置。如果是在Windows系统中,可以尝试使用管理员身份运行命令行,或者更改项目文件夹的权限。 此外,在安装Vue时,可能会遇到包版本不匹配的问题。我们可以尝试删除`package-lock.json`文件,并重新安装依赖: ``` rm package-lock.json npm install ``` 如果还是无法解决问题,我们可以尝试更新npm的版本: ``` npm install -g npm@latest ``` 最后,如果以上方法都没有解决问题,我们可以尝试手动安装Vue的依赖包,首先需要先安装`vue-cli`: ``` npm install -g vue-cli ``` 然后在项目目录中执行以下命令来安装依赖: ``` npm install ``` 如果以上方法仍然无法解决问题,可以尝试在Vue官方文档或者相关的技术论坛搜索解决方案,或者请教更有经验的开发者。 ### 回答3: 当使用`npm install`安装Vue报错,可能有以下几种原因和解决方法: 1. 网络问题:有时候由于网络原因,无法成功下载必要的依赖包。可以尝试使用其他网络连接,或者使用`npm config set registry https://registry.npm.taobao.org`命令将npm源切换到淘宝镜像,再重新运行`npm install`。 2. 安装包版本冲突:如果项目中已经存在一些依赖包,可能与要安装的Vue版本存在冲突。可以尝试使用`npm ls`命令查看项目依赖树,检查是否有冲突的依赖关系存在,并且可以使用`npm update`命令来更新冲突的包。 3. npm包损坏或缓存问题:有时候,npm包的下载可能会被中断或者在缓存中出现问题,导致安装过程报错。可以尝试使用`npm cache clean --force`命令清除npm缓存,然后再重新运行`npm install`。 4. 权限问题:如果在某个目录下执行`npm install`时没有足够的权限,可能会导致报错。可以尝试使用管理员权限(Windows系统上右键点击命令提示符或终端,选择“以管理员身份运行”)再次执行安装命令。 5. package.json配置问题:有时候,包管理文件package.json中的配置可能出现问题,导致npm安装报错。可以检查package.json中的依赖项是否正确,并且可以尝试删除node_modules目录和package-lock.json文件后,重新运行`npm install`命令。 如果以上方法无法解决问题,可以尝试在搜索引擎或者Vue的官方社区中搜索相关报错信息,可能会找到更具体的解决方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值