vue-cli 3.x中@路径提示Module is not installed

原创 已于 2022-12-22 09:20:39 修改 · 1.4w 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue3.x #前端开发

于 2019-09-02 11:10:21 首次发布
本文解决Vue3项目在IDEA中因找不到webpack.config.js而出现的Module is not installed错误。详细步骤包括使用全局搜索定位webpack配置文件，并调整路径设置。

错误显示

IDEA中Vue项目引入的路径@路径格式中提示Module is not installed
错误提示

问题原因

  • vue3中没有了 webpack.config.js 文件
  • IDEA找不到这个文件了,所以提示这个信息

解决方式

  • 双击shift键,打开全局搜索,输入webpack
    全局搜索
  • 选择红框中的webpack
  • 点击选择路径
    选择路径
  • 选择路径
    选择路径
  • 路径为项目中的 node_modules -> @vue -> cli-service -> webpack.config.js 文件.
  • 点击确定后IDEA 会提示IDEA 提示

如果未生效,则重启下IDEA,即可解决问题.

module “QtQuick.Studio.Effects“ is not installed解决办法
std::cout"helloworld"std::endl
06-16 1944
module "QtQuick.Studio.Effects" is not installed解决的办法
vue-cli4更新历程
禅思院
10-17 8161
4.0.1 (2019-10-16) ???? Bug Fix @vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service-global, @vue/cli-ui-addon-webpack, @vue/cli-ui-addon-widgets, @vue/cli-ui, @vue/cli...
vite vue3+ts @引入无提示/解决提示报错
^_^
10-19 8491
配首先置setting.json好后 重新引入 没有红色波浪线但是 vite不认识 @符号 运行项目还是会报错。这时候就需要在vite.config.ts中添加配置。如果path会报错 需要下载一下@types/node。这时候已经有提示了 但是ts会报错。
uni-app 小程序开发避坑：诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
最新发布
qq_38883889的博客
10-20 565
摘要 在uni-app+Vue3开发微信小程序时，遇到间歇性module not defined错误。分析发现是uni-app差量编译和小程序开发工具热重载的时序竞争导致：编译未完成时工具已刷新，造成模块查找失败。建议同时统一使用@别名路径以增强稳定性。
vue+typescript @引用路径报错
janyxh的博客
07-27 1297
最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。 想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。 那在目前的架构下，怎么使用@作为路径的开头呢？ 经查询vite文档，发现可以使用resolve.alias设置别称。 vite.config.ts import path from "path"; export default defineConfig({ resolve:
Vue-cli3.x中使用@引入文件Module is not installed
qq_43620423的博客
09-05 1711
一、问题产生 1.出现错误 2.出现原因 在使用WebStrom或是Idea对vue项目进行开发时通常会使用“@ + 路径”的方法来引入文件， 但是由于在Vue-cli3.x中没有了build文件夹，而编译器又找不到webpack.config.js文件， 所以就出现了Module is not installed这个错误。 二、解决方法 既然编译器找不到webpack.config.js文件，那么我们就告诉编译器文件位置。 1.打开设置 使用快捷键 Ctrl+Alt+S 或者 通过以下步骤打开 F
vue项目idea提示Module is not installed解决
qq_17444449的博客
05-11 830
原文链接：https://blog.csdn.net/u014042372/article/details/118026701。
Vue进阶之Vue CLI服务—@vue/cli-service & Vuex
qq_34306228的博客
11-27 2524
平常npm run serve，npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev，最终真正执行的是 node bin/vue-cli-service.js run serve，本质上也就是Commander。下面的这个就是通过vue-cli创建的默认的模板，里面有标识符，就是ejs模板化语言，在开发中称之为生成模板的过程，使用的就是ejs(嵌入式的js)还是先看cli-service的package.json找到bin的入口文件。
npm install报错peerDependencies WARNING eslint-plugin-vue@^5.2.3 requires a peer of eslint@^5.0.0 but
01-07
peerDependencies WARNING eslint-plugin-vue@^5.2.3 requires a peer of eslint@^5.0.0 but eslint@6.8.0 was installed peerDependencies WARNING eslint-plugin-vue@5.2.3 › vue-eslint-parser@^5.0.0 requires ...
vue.config.js中配置Vue的路径别名的方法
10-15
在Vue.js开发中，路径别名是一个非常实用的功能，它允许开发者为项目中的常用路径创建简短的别名，从而提高代码的可读性和可维护性。Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置...
bug Error: Cannot find module ‘vue-loader-v16/package.json‘的解决办法
weixin_40945354的博客
03-03 2442
更新，命令如下，在 https://stackoverflow.com/questions/63504594/error-cannot-find-module-vue-loader-v16-package-json 查到 cnpm i --save-dev vue-loader-v16 ivyone@ivyonedeMacBook-Pro daily-cost % cnpm install ⠦ [12/17] Installing source-map@^0.6.1[vue-loader-v16@npm
vue项目中引入组件时出现的Module is not installed问题
m0_63550220的博客
09-10 1991
问题描述：你可能尝试引入了一个npm包或自定义组件，但是忘记了先通过npm或yarn安装这个包，或者安装过程失败了。确保你已经在项目的根目录下运行了npm install <包名>或yarn add <包名>来安装所需的包。确保它是相对于你的文件位置的相对路径，或者是npm包的正确名称。仔细检查模块名或文件名的拼写，确保它与实际安装的包名或文件名完全匹配（包括大小写）。如果是在引入自定义组件时出错，请确保该组件文件存在于你的项目中，并且路径正确。问题描述：你安装的包可能与你项目中的其他依赖不兼容。
idea开发vue项目时，使用@引入组件警告：Module is not installed
Rosen's
03-05 7008
由于在Vue-cli3.x中没有了build文件夹，而编译器又找不到webpack.config.js文件，所以就出现了Module is not installed这个错误。 解决办法：依次打开file/setting/languages&frameworks/javaScript/Webpack 配置webpack configuration file，点击输入框右侧的小文件夹图标，选择node_modules目录下的webpack.config.js文件 应用并保存后，需要重启一下ide.
vue项目idea提示Module is not installed
qq_38392623的博客
11-10 3550
现象如图: 原因: 没有配置webpack文件 参照以下配置: 如果项目内有build文件夹 则配置build文件夹下配置文件
【笔记】Webstorm vue-cli3 import compoent: “Module is not installed”
印记
09-19 496
Webstorm在使用到vue-cli 3 的时候，出现 import compoent: “Module is not installed”。 ...
Vue 中的 @ Module is not installed
word_joke的博客
01-02 1108
https://blog.csdn.net/qq_37274323/article/details/100206842
解决vue项目中引入组件时出现的Module is not installed问题
yu57955的博客
12-03 8162
如图，在vue项目中import自己定义的组件时，‘@api/table’出现下划线，ctrl+右键点击不会跳转到对应组件。鼠标移上去显示Module is not installed，多方查询后终于弄清楚了原因。 图中路径中有个@符号，这个符号是在build目录下的webpack.base.conf.js文件中定义的，代表当前项目的src目录。 之所以出现上述问题是因为在下图中的webpack中没有指定webpack 的配置文件，或者配置文件指定得不对。找到原因后解决方案就简单了，只需要将该配置文件路径
Webstorm Module is not installed/Cannot find declaration to go to
weixin_44240581的博客
02-17 571
Webstorm 点击无法跳转到对应文件
webstrom vue3 module is not installed
04-03
<think>嗯，用户想在WebStorm中解决Vue3模块未安装的问题。首先，我需要确认他们是否已经正确安装了Node.js和npm，因为这是使用Vue CLI或Vite的前提。如果没有安装，应该先指导他们安装这些工具。 接下来，用户可能需要创建一个新的Vue3项目。使用Vue CLI的话，需要全局安装@vue/cli，然后通过vue create命令创建项目。或者，使用Vite的话，可以用npm create vite命令。创建项目后，WebStorm应该能自动识别项目结构，但可能需要配置一下。 然后，安装依赖项是关键步骤。进入项目目录运行npm install，这样所有依赖包括Vue3都会被安装。如果用户遇到模块未安装的错误，可能是因为依赖没有正确安装，或者路径设置有问题。 另外，检查WebStorm的设置也很重要。比如，Node.js和npm的路径是否正确，是否禁用了自动依赖安装。用户可能需要手动启用这些功能，或者清除缓存重新启动IDE。 如果问题依然存在，可能需要检查package.json里的依赖是否正确，或者尝试删除node_modules重新安装。有时候，权限问题或者网络问题也会导致安装失败，需要提醒用户注意。 最后，确保用户正确导入和使用Vue模块。如果代码中有拼写错误或路径错误，WebStorm可能会提示模块未找到。这时候需要检查导入语句是否正确，比如应该是import { createApp } from &#39;vue&#39;而不是旧版的Vue2语法。</think>### 解决WebStorm中Vue3模块未安装的问题 #### 步骤1：确保Node.js与npm环境 1. 验证Node.js和npm是否安装： ```bash node -v # 要求版本≥14.18.0 npm -v # 要求版本≥6.14.15 ``` 2. 若未安装，需从[Node.js官网](https://nodejs.org/)下载LTS版本[^1] #### 步骤2：创建/打开Vue3项目 1. 使用Vue CLI创建项目： ```bash npm install -g @vue/cli # 安装Vue CLI vue create my-project # 选择Vue3模板 ``` **或** 2. 使用Vite创建项目： ```bash npm create vite@latest my-project -- --template vue ``` #### 步骤3：安装依赖包 1. 在WebStorm终端中执行： ```bash cd my-project npm install ``` ![npm install执行示意图](https://example.com/npm-install-demo.png)（示意图仅作流程说明） #### 步骤4：配置WebStorm 1. 文件 > 设置 > Languages & Frameworks > JavaScript > 选择Node.js版本 2. 检查设置 > Languages & Frameworks > Node.js and npm > 确保"Code Assistance"已启用 3. 右键项目中的`package.json` > Show npm Scripts #### 步骤5：解决常见报错 - **"Module not found"错误**： 1. 删除`node_modules`文件夹 2. 重新运行`npm install` 3. 检查`package.json`是否包含： ```json "dependencies": { "vue": "^3.2.0" } ``` - **WebStorm未识别语法**： 1. 右键项目目录 > "Mark Directory as" > "Resource Root" 2. 安装Vue.js插件：设置 > Plugins > 搜索"Vue.js"并安装 #### 验证安装 创建测试组件`src/components/Test.vue`： ```vue <template> <h1>Vue3模块已安装: {{ version }}</h1> </template> <script setup> import { ref } from &#39;vue&#39; const version = ref(&#39;3.2.0&#39;) </script> ```
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值