Question

更新npm＆amp;节点到他们的最后版本，当我尝试运行我的vue项目时出现以下错误：

找不到这些依赖项：


!! VUE式装载机！CSS-装载机！../../../../../../../../../ swlkagenda / 1.2.0 /编译/ node_modules / VUE装载机/ lib目录/风格重写ID =数据-v-c906422a和放大器;作用域=真wisaapp /登录/ 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 inhome/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'   “/家/建设者/构建/发布/项目/ wisaweb /连接制造商”   @   /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'   '/家/建设者/构建/发布/项目/ 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式装载机！CSS-装载机！../../../../../../../../../ swlkagenda / 1.2.0 /编译/ node_modules / VUE -loader / LIB /样式重写ID =数据-v-c906422a＆安培;作用域=真wisaapp / SRC /组件/全局/登录/ login.css
！

Answer 1

看起来你错过了peerDependency，这可能是因为你从NPM 2升级了，或者可能只是安装出了问题，所以只需这样做：

npm install css-loader --save-dev

如果其他所有方法都失败了，只需从项目中移除node_modules并进行全新安装：npm install

Answer 2

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

Answer 3

您可以将vue-loader添加到您的应用程序并使用绝对路径以＆＃34; ./"为前缀;例如。 ` script src =＆＃34; .pathtoyourjsfile.js＆＃34;

Answer 4

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

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

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

我进行了更改，以使路径不再包含相同的名称，从而解决了该问题。

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

Answer 5

当我想在我的 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 位置中解析，这可能无法在项目中的不同位置工作。

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

Answer 6

请注意，错误提示：

someFile.vue IN anotherFile.vue。

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

因此，请仔细检查anotherFile.vue文件中的导入语句是否具有正确的路径。

例如：

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

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

6 个答案: