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使用el-table 添加行手动填写数据和删除行及提交保存功能
遇到这样的需求点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存,怎么实现的呢,下面通过实例代码给大家详细讲解,感兴趣的朋友一起看看吧
2023-12-12
elementUI同一页面展示多个Dialog的实现
这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
在vue项目中使用Nprogress.js进度条的方法
NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。这篇文章主要介绍了在vue项目中使用Nprogress.js进度条的方法,需要的朋友可以参考下
2018-01-01
Vue中配置使用process.env详解
process.env 是 Node.js 中的一个环境对象，其中保存着系统的环境的变量信息，可使用 Node.js 命令行工具直接进行查看，这篇文章主要介绍了Vue中配置process.env详解,需要的朋友可以参考下
2023-03-03
在vue-cli 3中给stylus、sass样式传入共享的全局变量
这篇文章主要介绍了在vue-cli 3中，给stylus、sass样式传入共享的全局变量,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
vue中如何让子组件修改父组件数据
这篇文章主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
vue中__ob__: Observer的踩坑记录
这篇文章主要介绍了vue中__ob__: Observer的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue中使用require.context自动引入组件的操作方法
require.context 是 webpack 提供的一个API,用于创建context,即一组具有相同上下文的模块,使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系,本文给大家讲解Vue中使用require.context自动引入组件的方法,感兴趣的朋友一起看看吧
2024-01-01
Vue3 axios配置以及cookie的使用方法实例演示
这篇文章主要介绍了Vue3 axios配置以及cookie的使用方法,需要的朋友可以参考下
2023-02-02
vue引入组件的几种方法代码示例
vue的一个强大功能就是组件化开发,下面这篇文章主要给大家介绍了关于vue引入组件的几种方法,文中给出了详细的代码及图文介绍,需要的朋友可以参考下
2024-04-04