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 相关文章推荐
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
理解jquery事件冒泡
Jan 03 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
详解JS模块导入导出
Dec 20 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python实现统计单词出现的个数
2015/05/28 Python
图文详解WinPE下安装Python
2016/05/17 Python
python实现顺时针打印矩阵
2019/03/02 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
Python学习笔记之装饰器
2020/08/06 Python
python实现简单文件读写函数
2021/02/25 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
社团成立邀请函
2014/01/08 职场文书
企业宣传方案
2014/03/04 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
运动会闭幕词
2015/01/28 职场文书
店铺转让协议书
2015/01/29 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书