脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vscode Vue别名路径提示

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

 更新时间：2020年07月31日 09:13:00   作者：Suvin7  
这篇文章主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

开发场景

当使用 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别名路径提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • VUE搭建手机商城心得和遇到的坑

    VUE搭建手机商城心得和遇到的坑

    这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue单页面改造多页面应用的全过程记录

    vue单页面改造多页面应用的全过程记录

    众所都知vue是一个单页面应用,下面这篇文章主要给大家介绍了关于vue单页面改造多页面应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue-router后台鉴权流程实现

    vue-router后台鉴权流程实现

    本文主要介绍了vue-router后台鉴权流程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue3关于RouterView插槽和过渡动效

    vue3关于RouterView插槽和过渡动效

    这篇文章主要介绍了vue3关于RouterView插槽和过渡动效,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue.js中vue-property-decorator的使用方法详解

    Vue.js中vue-property-decorator的使用方法详解

    vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它
    2024-08-08
  • vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421

    vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421

    这篇文章主要介绍了vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue ElementUI级联选择器回显问题解决

    vue ElementUI级联选择器回显问题解决

    这篇文章主要介绍了vue ElementUI级联选择器回显问题解决，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • Vue使用axios图片上传遇到的问题

    Vue使用axios图片上传遇到的问题

    后端写个上传图片的接口可不是很简单，只需要让这个字段限制为图片格式，后台做个保存的逻辑就完事了，前端处理还要牵扯到请求头，数据格式的处理等等问题，按照老传统把图片按照字符串往接口put发现返回的全是400错误，直到我知道了前端的FormData方法！
    2021-05-05
  • vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0 环境变量与模式配置方法

    vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下
    2018-11-11
  • vue项目的创建的步骤(图文教程)

    vue项目的创建的步骤(图文教程)

    本文主要介绍了vue项目的创建的步骤(图文教程)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论