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配置@别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目base64加解密使用方式以及解密乱码

    vue项目base64加解密使用方式以及解密乱码

    这篇文章主要介绍了vue项目base64加解密使用方式以及解密乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    这篇文章主要介绍了vue 数据双向绑定的实现方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue-cli设置css不生效的解决方法

    vue-cli设置css不生效的解决方法

    这篇文章主要介绍了vue-cli设置css不生效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 浅谈vue中的data与_data的关系是什么

    浅谈vue中的data与_data的关系是什么

    在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下
    2023-12-12
  • Vue实现固定定位图标滑动隐藏效果

    Vue实现固定定位图标滑动隐藏效果

    移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
    2019-05-05
  • Vue响应式添加、修改数组和对象的值

    Vue响应式添加、修改数组和对象的值

    有些时候,不得不想添加、修改数组和对象的值,但是直接添加、修改后又失去了getter、setter,由于JavaScript的限制, Vue不能检测以部分变动的数组
    2017-03-03
  • vue中ref和reactive的区别及说明

    vue中ref和reactive的区别及说明

    这篇文章主要介绍了vue中ref和reactive的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue实现手机计算器

    Vue实现手机计算器

    这篇文章主要为大家详细介绍了Vue实现手机计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue-better-scroll 的使用实例代码详解

    vue-better-scroll 的使用实例代码详解

    这篇文章主要介绍了vue-better-scroll 的使用实例代码详解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 浅谈VUE uni-app 生命周期

    浅谈VUE uni-app 生命周期

    这篇文章主要介绍了uni-app 的生命周期,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论