vscode中Vue别名路径提示的实现


Posted in Javascript onJuly 31, 2020

开发场景

当使用 Vue 框架进行项目开发时,在 vue.config.js 中配置好了路径别名后,到其他页面引入组件、引入 css 、引入静态文件路径时,使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件,但是并无作用。这样容易出现路径拼写错误的低能问题,同时也会造成开发效率降低

解决方案

在项目 package.json 所在同级目录下创建文件 jsconfig.json, 来解决别名路径不提示的问题。(配置完保存文件后需要重启编辑器才能生效。而且它只能识别 .vue 和 .js结尾的文件,css文件与其他的静态文件依然没有提示, 不推荐!!!)

// .jsconfig.json 
{ 
  "compilerOptions": { 
    "baseUrl": ".", 
    "paths": { 
      "@/\*": \['src/\*'\], 
      "a/\*": \["src/assets/\*"\], 
      "c/\*": \["src/components/\*"\], 
      ... 
    } 
   }, 
  "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
  "exclude": \["node\_modules"\] 
}

在 vscode 的 setting.json 中给 Path Intellisence 配置(该方案是最优选,能识别任意格式文件,覆盖率最广。当别名发生改变时只需修改配置即可)

// setting.json 
"path-intellisense.mappings": { 
  "a": "${workspaceRoot}/src", 
  "c": "${workspaceRoot}/src/components", 
  ... 
}

其他网友解决方法

项目中webpack.base.conf.js配置自定义别名

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
   'styles': resolve('src/assets/styles')
  }
 },

在项目根目录下创建jsconfig.json文件,配置如下:

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "@/*": [
    "src/*"
   ],
   // 配置自定义的别名匹配路径
   "styles/*": [
    "src/assets/styles/*"
   ]
  },
  "target": "ES6",
  "module": "commonjs",
  "allowSyntheticDefaultImports": true
 },
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules",
  "dist"
 ]
}

到此这篇关于vscode中Vue别名路径提示的实现的文章就介绍到这了,更多相关vscode Vue别名路径提示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
js给selected添加options的方法
May 06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
Vue单文件组件开发实现过程详解
Jul 30 #Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 #Javascript
在vue中实现嵌套页面(iframe)
Jul 30 #Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
You might like
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python实现稀疏矩阵示例代码
2017/06/09 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
学生实习推荐信范文
2013/11/26 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
租房协议书怎么写
2014/04/10 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
小学生通知书评语
2014/12/31 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
初一英语教学反思
2016/02/15 职场文书
Java中的随机数Random
2022/03/17 Java/Android