vue路径别名无法识别,Cannot find module

摘要:
编辑器:vscode;技术:vue-cli4,ts;示例:从“@api/user”导入{login};问题:无法找到模块“@/*”。矢量;在这种情况下,无法找到或单击模块,但可以在编译后使用。

编辑器:vscode;

技术:vue-cli4,ts;

例子:import { login } from "@api/user";

问题:Cannot find module '@/*'.Vetur(2307);

此种情况无法找到模块也不能点击,但是编译后是可以使用的。

原因:无法解析别名模块。

解决方法:

将项目放到vscode工作区根目录(只留一个项目);

在vscode中添加插件:Path Intellisense

点击插件的设置按钮:

vue路径别名无法识别,Cannot find module第1张

 选择扩展设置:

vue路径别名无法识别,Cannot find module第2张

 选择在settings.json中编辑:

vue路径别名无法识别,Cannot find module第3张

 添加对应的别名解析:

vue路径别名无法识别,Cannot find module第4张

 到此,插件配置完毕,重启vscode编辑器;

如果是 typescript 开发环境,需要配置项目根目录的 tsconfig.json 文件

 修改paths,添加对应的模块:

vue路径别名无法识别,Cannot find module第5张

如果是 JavaScript 开发环境,在项目根目录创建 jsconfig.json 文件

{
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"],
        "@api/*": ["src/api/*"]
      }
  },
  "exclude": [
      "node_modules"
  ]
}

配置完成后重启项目就可以了。

免责声明:文章转载自《vue路径别名无法识别,Cannot find module》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇systemd 和 systemctl 使用深入理解Java 类加载出现死锁? 转下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

动态加载菜单 之前的 导航树 是写死的,实际应用中需要从后台服务器获取菜单数据之后动态生成。 之前的mock已经准备好了模拟数据 接口模块化 之前说过,当接口变多时,放在一个 interface.js 中不方便维护。 现在改名为 api.js 作为集合文件,将里面的 相关接口 都转入新的文件夹 modules 里面。  模块化之后,模块接口写在相应的模块...

关于react实现类似vue keep-alive 的cache router的功能解决方案

// 问题来源 众所周知react是单页面应用,在路由发生变化的时候,她所对应的页面或者组件会被卸载。当路由加载的时候,原页面所有的数据都会重新加载 这在移动端的用户体验可能是一个重大灾难! 比如列表滚动到第20页或者tab切换第三个tab 再去滚动列表进入详情页,当你返回的时候你原来的浏览记录被重新加载了,这个体验会是非常差。 react官方...

学习vue之windows下安装live-server 超级详细篇

最近项目要求用vue2.0所以开始着手学习。 前期准备: 下载Node.js 地址:http://nodejs.cn/download/ 选择自己对应的版本,我下载的是.msi 64位的 然后就双击下一步吧。完成之后,记得配置环境变量(不知道环境变量在哪里的 先拉到最下面) 因为我把Node.js安装到了D盘nodeJs目录下。 呼出cmd,命令走起 ,...

如何搭建一个vue项目(完整步骤)

转载:https://www.cnblogs.com/hellman/p/10985377.html 一、安装node环境   1、下载地址为:https://nodejs.org/en/   2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功      3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.or...

Visual Studio Code 从介绍,安装到配置所需插件

该文章将会介绍到vs与vs code的区别,并且会详细介绍vscode的安装步骤,和我所了解过的插件配置(如有遗漏,欢迎大家补充并提出宝贵意见) 提到visualstudiocode,想必你也听说过visualstudio(vs) 那就从查阅过的资料大致总结以下几点,关于这两个产品的区别: 首先总的来看,它们都是微软公司的产品 名字不一样当然会有不一样的用...

自定义yarn运行vue项目命令

  在项目中的package.json文件的scripts块中可以看到新项目的yarn命令集合 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },...