Webstorm vue项目@路径不能跳转到对应资源,提示Cannot find declaration to go to

Webstorm vue项目@路径不能跳转到对应资源,提示Cannot find declaration to go to

在这里插入图片描述

我们 ctrl加鼠标左键点击方法会失效,看了网上很多教程在说需要在此处配置一下webpack.config.js的文件路径,而且指向了node_modules\@vue\cli-service\webpack.config.js

image-20240621082933729

我试了好多次,不行,不论对错,这里给出如下方法,可实现:

在自己的项目中新建一个webpack.config.js,内容如下

'use strict'
const path = require('path')
 
module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.ts', '.vue', '.json', '.css', '.node', '.sass'],
        alias: {
            '@': path.resolve('src'),
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

这是一个用于配置Webpack的JavaScript文件。Webpack是一个流行的模块打包工具,通常用于将项目中的各种资源(如JavaScript、CSS、图片等)打包成一个或多个文件,以便在生产环境中使用。让我们逐行解释这个配置文件的各个部分:

1. ‘use strict’

'use strict';

这行代码启用了严格模式(strict mode),它是一种更严格的JavaScript解析和执行模式,能够捕获一些常见的编码错误,防止意外的全局变量声明等问题。

2. 引入 path 模块

const path = require('path');

path 是Node.js的一个核心模块,用于处理和转换文件路径。通过使用这个模块,可以更加方便地处理不同操作系统的路径格式。

3. 模块导出

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.ts', '.vue', '.json', '.css', '.node', '.sass'],
        alias: {
            '@': path.resolve('src'),
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

这里定义了Webpack的配置对象,并将其导出。

3.1. context
context: path.resolve(__dirname, './'),

context 属性设置了Webpack的上下文目录,即项目的根目录。__dirname 是Node.js中的一个全局变量,表示当前文件所在的目录。

3.2. resolve
resolve: {
    extensions: ['.js', '.ts', '.vue', '.json', '.css', '.node', '.sass'],
    alias: {
        '@': path.resolve('src'),
        'vue$': 'vue/dist/vue.esm.js'
    }
}

resolve 配置了解析模块的规则。

3.2.1. extensions
extensions: ['.js', '.ts', '.vue', '.json', '.css', '.node', '.sass'],

extensions 属性指定了在解析模块时可以自动添加的文件扩展名数组。这意味着在导入模块时,可以省略这些扩展名。例如,导入一个文件 example.js 时,只需要写 import example from './example',Webpack 会自动补全扩展名。

3.2.2. alias
alias: {
    '@': path.resolve('src'),
    'vue$': 'vue/dist/vue.esm.js'
}

alias 属性定义了模块路径的别名。它可以简化模块的导入路径。

  • '@': 将 '@' 映射到 src 目录。这意味着在项目中可以使用 @ 来代表 src 目录,例如 import MyComponent from '@/components/MyComponent.vue'
  • 'vue$': 将 'vue$' 映射到 vue/dist/vue.esm.js,即使用 Vue 的完整版构建,这个构建包含了模板编译器。

image-20240621083905017

然后配置如上即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/732712.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MURF3040CTR-ASEMI智能AI应用MURF3040CTR

编辑:ll MURF3040CTR-ASEMI智能AI应用MURF3040CTR 型号:MURF3040CTR 品牌:ASEMI 封装:TO-220F 恢复时间:35ns 最大平均正向电流(IF):30A 最大循环峰值反向电压(VR…

优选免单模式:电商销售的新篇章

随着电商市场的日益繁荣,各种创新销售模式层出不穷。其中,优选免单模式以其独特的运作方式和激励机制,吸引了大量消费者的目光。该模式的核心在于通过降低商品售价、引入社交元素以及设计阶梯式奖励,激发消费者的购买热情&#xf…

ES全文检索支持繁简和IK分词检索

ES全文检索支持繁简和IK分词检索 1. 前言2. 引入繁简转换插件analysis-stconvert2.1 下载已有作者编译后的包文件2.2 下载源码进行编译2.3 复制解压插件到es安装目录的plugins文件夹下 3. 引入ik分词器插件3.1 已有作者编译后的包文件3.2 只有源代码的版本3.3 安装ik分词插件 4…

Python-日志模块

目录 一、日志级别 二、日志配置 1、日志基本配置 2、日志配置字典(知道咋么改就可以) 3、日志的使用 一、日志级别 import logginglogging.debug(调试日志) logging.info(消息日志) logging.warning(警告日志) logging.error(错误日志) logging.cr…

1931java Web披萨店订餐系统idea开发mysql数据库web结构java编程计算机网页源码servlet项目

一、源码特点 java Web 披萨店订餐系统是一套完善的信息管理系统,结合java 开发技术和bootstrap完成本系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用 B/S模式开发。 视频地址:…

sixLabors.ImageSharp图片截取

一、nuget <PackageReference Include"SixLabors.ImageSharp" Version"3.1.4" /> 二、代码 using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Logging; using System; using System.Collections.Generic; using System.Diagnostics; u…

吉时利 2420(KEITHLEY) 高电流源表

Keithley 2420高电流源表&#xff0c;60V&#xff0c;3A&#xff0c;60W Keithley 2420 高压源表是一款 60W 仪器&#xff0c;设计用于输出和测量 5V&#xff08;输出&#xff09;和 1V&#xff08;测量&#xff09;至 60V 的电压以及 100pA 至 3A 的电流。2420 型的生产测试应…

【文献及模型、制图分享】1985-2015年美国坦帕湾流域土地开发利用强度时空变化分析

公众号新功能 目前公众号新增以下等功能 1、处理GIS出图、Python制图、区位图、土地利用现状图、土地利用动态度和重心迁移图等等 2、核密度分析、网络od分析、地形分析、空间分析等等 3、地理加权回归、地理探测器、生态环境质量指数、地理加权回归模型影响因素分析、计算…

C语言入门系列:数据类型之整数

文章目录 一&#xff0c;简介二&#xff0c;整数的符号1&#xff0c;有符号整数2&#xff0c;无符号整数3&#xff0c;char表示整数的特殊性 三&#xff0c;整数的子类型1&#xff0c;三种子类型2&#xff0c;定义整形的最佳实践 四&#xff0c;整数类型的极限值五&#xff0c;…

multiprocessing多进程计算及与rabbitmq消息通讯实践

1. 需求与设计 我所设计的计算服务旨在满足多个客户对复杂计算任务的需求。由于这些计算任务通常耗时较长且资源消耗较大&#xff0c;为了优化客户体验并减少等待时间&#xff0c;我采取了并行计算的策略来显著提升计算效率。 为实现这一目标&#xff0c;我计划利用Python的m…

微信小程序毕业设计-“黄师日报”平安系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

奔驰EQS SUV升级原厂主动式氛围灯效果展示

以下是一篇关于奔驰 EQs 升级原厂主动氛围灯案例的宣传文案&#xff1a; 在汽车科技不断演进的今天&#xff0c;我们自豪地为您呈现奔驰 EQs 升级原厂主动氛围灯的精彩案例。 奔驰 EQs&#xff0c;作为豪华电动汽车的典范&#xff0c;其卓越品质与高端性能有目共睹。而此次升…

定义多个类对象,分别输入和输出各对象中的时间(时:分:秒)

在前面的文章中&#xff0c;类中只有公用数据而无成员函数&#xff0c;而且只有1个对象。可以直接在主函数中进行输入和输出。若有多个对象&#xff0c;需要分别引用多个对象中的数据成员&#xff0c;可以写出如下程序&#xff1a; &#xff08;1&#xff09;编写程序&#xff…

流程控制相关

1.break语句 只能用在循环体内&#xff0c;用来结束当前循环 语法&#xff1a; while 循环条件表达式&#xff1a; 语句块 if 条件表达式&#xff1a; break 语句块 for i in 迭代对象&#xff1a; 语句块 if 条件表达式&#xff1a; break 语句块 小练&#xff1a; 求一…

WPS相同字体但是部分文字样式不一样解决办法

如下图&#xff0c;在使用wps编辑文档的时候发现有些电脑的文字字体很奇怪&#xff0c;但是把鼠标移到这个文字的位置&#xff0c;发现它和其他正常文字的字体是一样的&#xff0c;都是仿宋_GB2312 正常电脑的文字如下图所示 打开C:\Windows找到Fonts这个文件夹 把仿宋_GB2312这…

MySQL 死锁查询和解决死锁

来了来了来了&#xff01;客户现场又要骂街了&#xff0c;你们这是什么破系统怎么这么慢啊&#xff1f;&#xff01;&#xff1f;&#xff01; 今天遇到了mysql死锁&#xff0c;直接导致服务器CPU被PUA直接GUA了&#xff01; 别的先别管&#xff0c;先看哪里死锁&#xff0c;或…

使用Mixamo极简绑骨,导入unity中使用

如果你只想专注于角色建模&#xff0c;对于动画设计没有过多精力&#xff1b;如果你想白嫖别人的角色动画&#xff0c;用到自己的模型上&#xff1b;那么&#xff0c;这个网站很适合你&#xff1a;https://www.mixamo.com/ 操作步骤&#xff1a; 首先将自己的模型上传到这个网…

如何混淆 net core 8 架构 C# 编译程序

如何混淆 net core 8 架构 C# 编译程序 一、使用混淆工具 .NET Reactor V6.9二、net core 8 架构 C# 编译程序&#xff08;发布的单文件&#xff09;1、通过发布的单文件程序&#xff0c;可以直接在 .NET Reactor 拖入或打开 &#xff0c;勾选自己需要的保护功能。2、勾选自己需…

SHA256 安全散列算法加速器实验

1、SHA256 介绍 SHA256 加速器是用来计算 SHA-256 的计算单元&#xff0c; SHA256 是 SHA-2 下细分出的一种算法。 SHA-2 名称来自于安全散列算法 2 &#xff08;英语&#xff1a; Secure Hash Algorithm 2 &#xff09;的缩写&#xff0c;一种密码散列函 数算法标准…

群辉NAS中文件下载的三种方案

目录 一、迅雷套件 1、添加套件来源 2、安装套件 3、手机安装迅雷 二、qBittorrent套件 1、添加套件来源 2、改手工安装 3、更新后的问题 4、最后放弃DSM6 (1)上传文件手工安装 (2)添加套件来源 5、解决登陆报错 6、添加tracker 7、修改下载默认位置 8、手机…