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 相关文章推荐
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
Vue.js实现数据响应的方法
Aug 13 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
关于crontab的使用详解
2013/06/24 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python实现简单神经网络算法
2018/03/10 Python
Python netmiko模块的使用
2020/02/14 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
python怎么自定义捕获错误
2020/06/29 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
中职生自荐信
2013/10/13 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
医院院务公开实施方案
2014/05/03 职场文书
本科生就业推荐信
2014/05/19 职场文书
人力资源管理系自荐信
2014/05/31 职场文书