This dependency was not found: * src/vanta.waves in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dashboard/index.vue?vue&type=script&lang=js& To install it, you can run: npm install --save src/vanta.waves

时间: 2023-06-24 15:07:21 浏览: 464

Vue中”This dependency was not found”问题的解决方法

今天在初始化项目中，出现了一个奇怪的情况：明明路径是对的，但是编译的时候，一直报“This dependency was not found”的错。代码如下： import Vue from 'vue' import App from './App' import router from './router' import 'common/stylus/index.styl' /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App) }) 控制台一直报错，表示无法找到common/stylus/inde 在Vue项目开发中，我们有时会遇到一个常见的错误提示：“This dependency was not found”，这通常是由于模块导入路径不正确或Webpack配置不完善导致的。在本文中，我们将深入探讨这个问题，分析其原因，并提供解决方案。让我们回顾一下问题描述。在初始化Vue项目时，开发者在尝试导入`common/stylus/index.styl`文件时遇到了问题。虽然IDE自动补全了路径，但在编译过程中，控制台仍然报错，表示找不到这个文件。这可能是因为在导入语句中没有使用相对路径（即`.`开头的路径）来指示编译器从当前目录开始查找。在Vue.js项目中，当我们使用`import`语句导入文件时，如果不以`./`或`../`开头，Webpack会尝试解析该路径为全局模块或者基于配置的`alias`别名。在这种情况下，`common`被误识别为一个别名，导致找不到对应的文件。为了解决这个问题，我们需要在导入语句前添加`./`，使其成为相对路径，像这样： ```javascript import Vue from 'vue' import App from './App' import router from './router' import './common/stylus/index.styl' // 添加./避免编译器认为是别名 /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App) }) ``` 通过这种方式，Webpack将正确地理解`common/stylus/index.styl`是一个相对于当前文件的路径，从而找到并处理该文件。除了修正导入路径外，我们还可以检查Webpack配置文件（通常为`webpack.config.js`），确保没有设置与`common`冲突的`alias`。如果存在这样的配置，可以修改或移除它，以避免混淆。例如，如果有以下配置： ```javascript module.exports = { // ... resolve: { alias: { common: path.resolve(__dirname, 'path/to/another/common/folder') } } // ... } ``` 则应调整或删除`common`的别名配置，以免与实际文件路径产生冲突。此外，如果你的项目使用了`vue-cli`或者其他脚手架，那么可能是由于脚手架的默认配置不支持`.styl`文件的处理。为了处理Stylus文件，你需要安装`stylus`和`stylus-loader`依赖，并在Webpack配置中添加相应的规则。安装命令如下： ```bash npm install stylus stylus-loader --save-dev ``` 然后，在`webpack.config.js`的`module.rules`数组中添加一条规则，如下： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.styl$/, use: ['style-loader', 'css-loader', 'stylus-loader'] } ] } // ... } ``` 这样，Webpack就能识别并处理`.styl`文件了。总结来说，解决Vue中"This dependency was not found"的问题，首先要确保使用正确的相对路径进行文件导入。如果问题依然存在，检查Webpack配置中的`alias`别名设置，以及是否配置了处理特定文件类型的loader。在开发过程中，理解Webpack的模块解析机制和配置是非常重要的，它可以帮助我们更好地理解和解决问题，提高开发效率。对于初学者，参考官方文档和社区资源也是获取帮助的有效途径。希望这篇文章能对你有所帮助，如果你在实际操作中遇到任何疑问，欢迎留言讨论。感谢对软件开发网的支持！

这个错误通常是在使用 Vue.js 框架时，缺少了一个名为 `vanta.waves` 的依赖。要解决这个问题，你需要先确认 `vanta.waves` 是否被正确安装并且在正确的路径下。如果你已经确认了 `vanta.waves` 存在并且已经正确安装，那么你可以尝试按照错误提示中所说的运行以下命令来安装缺失的依赖： ``` npm install --save src/vanta.waves ``` 这条命令会在你的项目中安装缺失的依赖，并且会将其添加到项目的 `package.json` 文件中的 `dependencies` 中。安装完成后，你可以再次尝试运行你的应用程序，看看是否仍然出现相同的错误。

阅读全文

相关推荐

关于vue.js发布后路径引用的问题解决

This dependency was not found: * echarts/core in ./node_modules/vue-echarts/dist/index.esm.min.js系统报如上错误，请解决

This dependency was not found: * @/views/MenuList in ./src/router.js

解决ERROR Failed to compile with 1 errors 09:22:47 This dependency was not found: swiper/swiper-bundle.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modul

解决ERROR Failed to compile with 1 errors 09:22:47 This dependency was not found: swiper/swiper-bundle.css in ./node_module 08:56:04 This dependency was not found: * swiper/swiper-bundl

This dependency was not found: * vue- in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/page/Markdown.vue

This dependency was not found: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!.怎么办

基于微信小程序的校园论坛；微信小程序；云开发；云数据库；云储存；云函数；纯JS无后台；全部资料+详细文档+高分项目.zip

单电阻采样 基于单电阻采样的相电流重构算法 keil完整工程 单电阻采样 f103的单电阻，完整工程，带文档，带硬件资料 f3平台的单电阻完整工程，代码详细注释 还有微芯的单电阻smo代码加文档

最新推荐

基于微信小程序的校园论坛；微信小程序；云开发；云数据库；云储存；云函数；纯JS无后台；全部资料+详细文档+高分项目.zip

单电阻采样 基于单电阻采样的相电流重构算法 keil完整工程 单电阻采样 f103的单电阻，完整工程，带文档，带硬件资料 f3平台的单电阻完整工程，代码详细注释 还有微芯的单电阻smo代码加文档

jQuery左侧导航右侧tab页面切换.zip

GitHub图片浏览插件：直观展示代码中的图像

管理建模和仿真的文件

【OPPO手机故障诊断专家】：工程指令快速定位与解决

求[100，900]之间相差为12的素数对（注：要求素数对的两个素数均在该范围内）的个数

Android IPTV项目：直播频道的实时流媒体实现

"互动学习：行动中的多样性与论文攻读经历"

【OPPO手机工程模式终极指南】：掌握这些秘籍，故障排查不再难！

单电阻采样基于单电阻采样的相电流重构算法 keil完整工程单电阻采样 f103的单电阻，完整工程，带文档，带硬件资料 f3平台的单电阻完整工程，代码详细注释还有微芯的单电阻smo代码加文档

单电阻采样基于单电阻采样的相电流重构算法 keil完整工程单电阻采样 f103的单电阻，完整工程，带文档，带硬件资料 f3平台的单电阻完整工程，代码详细注释还有微芯的单电阻smo代码加文档