在 Vue.js 中找不到这些依赖项错误答案

【问题标题】：These dependencies were not found error in Vue.js在 Vue.js 中找不到这些依赖项错误
【发布时间】：2018-02-22 11:58:27
【问题描述】：

将 npm & node 更新到最新版本后，当我尝试运行我的 vue 项目时出现以下错误：

未找到这些依赖项：

!!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/ node_modules/vue-loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/login/login.css 在 /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

我的所有 vue 文件都出现相同的错误，如下所示：

Login.vue：

<template src="wisaapp/login/login.html"></template>
<script src="wisaapp/login/login.js"></script>
<style src="wisaapp/login/login.css" scoped></style>

我写的第一条错误信息是针对 vue 文件中的 css 文件。对于js 文件，我收到以下错误：

!!babel-loader!wisaapp/login/login.js 在 /home/projects/wisaweb/trunk/app/modules/wisaapp/login/login.vue

.js 和 .css 文件的路径在相对之前，但没有任何区别。

可能出了什么问题？

这是我的 package.json：

{
  "name" : "",
  "version" : "",
  "description" : "",
  "author" : "",
  "private" : true,
  "scripts" : {
    "dev" : "node build\/dev-server.js",
    "build" : "node build\/build.js",
    "unit" : "cross-env BABEL_ENV=test karma start test\/unit\/karma.conf.js --single-run",
    "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"
  },
  "dependencies" : {
    "axios" : "^0.15.3",
    "vue-axios" : "^1.2.2",
    "lodash" : "^4.17.4",
    "uglify-js" : "git+https:\/\/github.com\/mishoo\/UglifyJS2.git#harmony",
    "vue" : "^2.1.10",
    "vue-router" : "^2.2.0",
    "vue-style-loader" : "^2.0.4",
    "vue-touch" : "^2.0.0-beta.4",
    "vuex" : "^2.1.2",
    "wisaapp" : "./../../../../wisaweb_trunk/app/modules/wisaapp",
    "wisaapp-agenda-common" : "wisaapp-agenda-common"
  },
  "devDependencies" : {
    "autoprefixer" : "^6.7.2",
    "babel-core" : "^6.22.1",
    "babel-eslint" : "^7.1.1",
    "babel-loader" : "^6.2.10",
    "babel-plugin-transform-runtime" : "^6.22.0",
    "babel-preset-es2015" : "^6.22.0",
    "babel-preset-stage-2" : "^6.22.0",
    "babel-register" : "^6.22.0",
    "chalk" : "^1.1.3",
    "connect-history-api-fallback" : "^1.3.0",
    "css-loader" : "^0.26.1",
    "eslint" : "^3.14.1",
    "eslint-friendly-formatter" : "^2.0.7",
    "eslint-loader" : "^1.6.1",
    "eslint-plugin-html" : "^2.0.0",
    "eslint-config-standard" : "^6.2.1",
    "eslint-plugin-promise" : "^3.4.0",
    "eslint-plugin-standard" : "^2.0.1",
    "eventsource-polyfill" : "^0.9.6",
    "express" : "^4.14.1",
    "extract-text-webpack-plugin" : "^2.0.0-rc.2",
    "file-loader" : "^0.10.0",
    "friendly-errors-webpack-plugin" : "^1.1.3",
    "function-bind" : "^1.1.0",
    "html-webpack-plugin" : "^2.28.0",
    "http-proxy-middleware" : "^0.17.3",
    "webpack-bundle-analyzer" : "^2.2.1",
    "cross-env" : "^3.1.4",
    "karma" : "^1.4.1",
    "karma-coverage" : "^1.1.1",
    "karma-mocha" : "^1.3.0",
    "karma-phantomjs-launcher" : "^1.0.2",
    "karma-sinon-chai" : "^1.2.4",
    "karma-sourcemap-loader" : "^0.3.7",
    "karma-spec-reporter" : "0.0.26",
    "karma-webpack" : "^2.0.2",
    "lolex" : "^1.5.2",
    "mocha" : "^3.2.0",
    "chai" : "^3.5.0",
    "sinon" : "^1.17.7",
    "sinon-chai" : "^2.8.0",
    "inject-loader" : "^2.0.1",
    "babel-plugin-istanbul" : "^3.1.2",
    "phantomjs-prebuilt" : "^2.1.14",
    "chromedriver" : "^2.27.2",
    "cross-spawn" : "^5.0.1",
    "nightwatch" : "^0.9.12",
    "selenium-server" : "^3.0.1",
    "semver" : "^5.3.0",
    "opn" : "^4.0.2",
    "ora" : "^1.1.0",
    "shelljs" : "^0.7.6",
    "url-loader" : "^0.5.7",
    "vue-loader" : "^10.3.0",
    "vue-style-loader" : "^2.0.0",
    "vue-template-compiler" : "^2.1.10",
    "webpack" : "^2.2.1",
    "webpack-dev-middleware" : "^1.10.0",
    "webpack-hot-middleware" : "^2.16.1",
    "webpack-merge" : "^2.6.1",
    "transfer-webpack-plugin" : "^0.1.4"
  },
  "engines" : {
    "node" : ">= 4.0.0",
    "npm" : ">= 3.0.0"
  }
}

npm 版本：5.4.1

nodejs 版本：0.10.25

更新

我试过了：

npm install css-loader --save
npm install vue-style-loader --save
npm install after deleting node_modules map
deleting all the generated files by build procedure

但他们都没有工作

如果我运行npm run build，我会得到类似的错误如下：

错误 /home/builder/build/release/projects/wisaweb/connection-maker.vue 找不到模块：错误：无法解析“vue-style-loader” '/home/builder/build/release/projects/wisaweb/connection-maker' @ /home/builder/build/release/projects/wisaweb/connection-maker.vue 3:0-372@./src/router/index.js@./src/main.js@multi ./build/prod-client ./src/main.js

错误 /home/builder/build/release/projects/wisaweb/todolist.vue 找不到模块：错误：无法解析“babel-loader” '/home/builder/build/release/projects/wisaweb/todolist' @ /home/builder/build/release/projects/wisaweb/todolist.vue 7:2-99@./src/router/index.js@./src/main.js@multi ./build/prod-client ./src/main.js

更新 2

npm 对这个问题的建议是：

要安装它们，您可以运行： npm install --save !!vue-style-loader!css-loader!../../../../../../../../../swlkagenda/1.2.0/build/node_modules/vue -loader/lib/style-rewriter?id=data-v-c906422a&scoped=true!wisaapp/src/components/global/login/login.css

【问题讨论】：

标签： node.js npm vue.js vuejs2 webpack-style-loader

【解决方案1】：

您似乎缺少 peerDependency，这可能是因为您从 NPM 2 升级，或者可能只是安装出现问题，所以只需执行以下操作：

npm install css-loader --save-dev

如果一切都失败了，只需从您的项目中删除 node_modules 并重新安装：npm install

【讨论】：

我还发现这些错误（来自 babel-loader 和 vue-style-loader）并不适用于所有 js 和 css 文件。但是vue文件的结构却一模一样，真是奇怪

【解决方案2】：

我今天遇到了同样的问题。直到我重命名了父文件夹，我才能找到解决方案！（感叹号）在其名称中。我删除了一个感叹号，一切都开始工作了！

【讨论】：

父文件夹是什么意思？在我的情况下应该是哪个文件夹？
检查所有文件夹树。如果某个文件夹的名称带有感叹号 - 这可能是个问题。（我没有检查文件夹名称中是否还有其他受限符号
这帮助我找到了问题所在。我的地图结构包含两个相同的地图名称。 /mapname/mapname/..

【解决方案3】：

您可以将 vue-loader 添加到您的应用程序并使用绝对路径例如以“./”为前缀。

script src="./pathtoyourjsfile.js"

【讨论】：

【解决方案4】：

我遇到了同样的问题，但有另一个解决方案！

问题是项目文件夹的路径结构。我的路径看起来像这样（注意相同的地图名称）

/website/website/app/../..

我对其进行了更改，以便路径不再包含相同的名称解决了问题。

/site/website/app/../..

【讨论】：

【解决方案5】：

注意错误提示：

someFile.vue IN anotherFile.vue.

对我来说，这意味着我有一个 import 语句试图在 anotherFile.vue 中导入 someFile.vue，但它的路径错误。

所以仔细检查 anotherFile.vue 文件中的导入语句是否有正确的路径。

例如：

import PageLayout from "@/layouts/PageLayout.vue"

【讨论】：

【解决方案6】：

当我想在我的 Vue 应用程序中包含全局样式文件时，我遇到了同样的问题，但在不同的上下文中。我用谷歌搜索了以下方法：

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        prependData: `
          @import "assets/styles/styles.scss";
        `,
      },
    }
  }
}

这种方法的问题是双重的 - 首先它将styles.scss 文件的内容添加到每个处理的 scss 文件中 - 所以对于我的每个 Vue 组件（因为 sass-loader 因为所有 webpack 加载器都在 上运行每个文件 基础），其次styles.scss 的路径不是绝对的。并且由于 sass-loader 在每个文件的基础上运行，路径也在该文件及其 fs 位置的上下文中解析，这可能不适用于项目中的不同位置。

最后只是在项目根目录中导入样式文件，在src/main.ts 中使用import './styles.scss'。

【讨论】：