this relative module was not found: * ./router in ./src/main.js

时间: 2023-04-21 13:05:08 浏览: 282

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的模块解析机制和配置是非常重要的，它可以帮助我们更好地理解和解决问题，提高开发效率。对于初学者，参考官方文档和社区资源也是获取帮助的有效途径。希望这篇文章能对你有所帮助，如果你在实际操作中遇到任何疑问，欢迎留言讨论。感谢对软件开发网的支持！

这个错误提示是在 main.js 文件中，找不到相对路径为 ./router 的模块。可能是因为你没有正确引入或安装相关的依赖。你需要检查一下代码中是否有引入 ./router 这个模块，并且确认该模块是否已经正确安装。如果还是无法解决问题，可以尝试重新安装依赖或者查看相关的文档和资料。

阅读全文

this relative module was not found: * ./router in ./src/main.js

相关推荐

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

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

This dependency was not found: * @/views/web/session in ./src/router/index.js 这是什么问题

This dependency was not found: * vue/types/umd in ./src/router.js To install it, you can run: npm install --save vue/types/umd

This dependency was not found: * @/views/dataFactory/warehouseAI/index.vue in ./src/router/index.ts To install it, you can run: npm install --save @/views/dataFactory/warehouseAI/index.vue

This relative module was not found:* ./router in ./src/main.js

This relative module was not found: * ./registerServiceWorker in ./src/main.js

This relative module was not found: * ../views//oa/purchase in ./src/router/index.js

This relative module was not found: * ../views/oa/purchase in ./src/router/index.js

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

最新推荐

tables-3.6.1-cp39-cp39-win_amd64.whl

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

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

Keras正则化技术应用：L1_L2与Dropout的深入理解

在Python中使用xarray和cfgrib库处理GRIB数据时，如何有效解决遇到的DatasetBuildError错误？

JDiskCat：跨平台开源磁盘目录工具