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

vite配置@别名,以及如何让vscode智能提示路经

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

下面是正确的路径

vite配置@别名,以及如何让vscode智能提示路经

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

vite配置@别名,以及如何让vscode智能提示路经

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

按照以下步骤来做就好:

vite配置@别名,以及如何让vscode智能提示路经

 vite配置@别名,以及如何让vscode智能提示路经

 复制以下内容到settings.json

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

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

vite配置@别名,以及如何让vscode智能提示路经

发表回复