vite配置@别名以及让vscode智能提示路经的步骤

更新时间：2023年08月15日 11:09:13 作者：相见一月

这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下

vite配置@别名

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 // 配置@别名
 import { resolve } from "path"; 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
      // ↓解析配置
    resolve: {
      // ↓路径别名
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    ...
    // 配置@别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }, 
  },
}

如果运行不了或报错试下安装下 @types/node ，没有报错可以不用安装，有安装也没事

 npm install @types/node

vscode智能提示

如果没有提示先下载VScode插件（通用，不至vite，只要配置好@别名就行）

Path-intellisense

安装好后，发现不加一个名字就会以下情况

下面是正确的路径

如果还是没有提示或提示错误（只提示当前路径下的页面），可能是绿色框中要写个名，或给个空对象{}才可以

但这不是我们想要的，我们想要没有写名字的（名字可能没想好的）情况下，加个@/就有src路径下的提示

按照以下步骤来做就好：

复制以下内容到settings.json

{
    ....
    //添加以下配置（主要是前两个）
    "path-intellisense.mappings": {
        "@/": "${workspaceFolder}/src",
        "/": "${workspaceFolder}",
        "lib": "${workspaceFolder}/lib",
        "global": "/Users/dummy/globalLibs"
    },
    "path-intellisense.autoTriggerNextSuggestion": true,
}

这样就算没有加一个名也可以有自动提示了

总结

到此这篇关于vite配置@别名以及让vscode智能提示路经的文章就介绍到这了,更多相关vite配置@别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

VSCode中书写Vue无代码提示该如何解决
vscode开发vue非常好用,因为有很多的插件,可以补全语法,或者高亮便于检查错误,但我最近发现我的vscode却没有了代码提示,这篇文章主要给大家介绍了关于VSCode中书写Vue无代码提示该如何解决的相关资料,需要的朋友可以参考下
2022-12-12
vue-router路由跳转问题 replace
这篇文章主要介绍了vue-router路由跳转问题 replace，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue格式化数据后切换页面出现NaN问题及解决
这篇文章主要介绍了Vue格式化数据后切换页面出现NaN问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
这篇文章主要介绍了详解如何实现Element树形控件Tree在懒加载模式下的动态更新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
Vue进阶之CodeMirror的应用小结
CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言，下面这篇文章主要来和大家讲讲CodeMirror的应用，感兴趣的可以了解一下
2023-06-06
超详细的vue组件间通信总结
作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下
2021-07-07
vue3.2自定义弹窗组件结合函数式调用示例详解
这篇文章主要为大家介绍了vue3.2自定义弹窗组件结合函数式调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
关于vuex的学习实践笔记
vuex是vue的状态管理模式，主要可以解决父子组件嵌套层数较多，或者兄弟组件之间需要维护同一个状态的情况。下面这篇文章主要给大家介绍了关于学习vuex的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
2017-04-04
一文搞懂Vue2中的组件通信
这篇文章主要为大家介绍了Vue2中的组件通信方式，文中通过示例进行了详细的介绍，对我们学习Vue有一定的帮助，感兴趣的小伙伴可以了解一下
2022-07-07
Vue中跨标签通信详解
这篇文章主要为大家详细介绍了介绍了Vue中跨标签通信的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01