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 密码强度判断代码
Sep 05 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 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
DedeCms模板安装/制作概述
2007/03/11 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
JavaScript实现区块链
2018/03/14 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
一篇不错的Python入门教程
2007/02/08 Python
在pycharm中实现删除bookmark
2020/02/14 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
python计算导数并绘图的实例
2020/02/29 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
电焊工工作岗位职责
2014/02/06 职场文书
2014教师研修学习体会
2014/07/08 职场文书
最新离婚协议书范本
2014/08/19 职场文书
晚会闭幕词
2015/01/28 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
大学开学感言
2015/08/01 职场文书
给领导敬酒词
2015/08/12 职场文书
公司转让协议书
2016/03/19 职场文书