1.配置原因

在v3+ts的项目中,vscord不认识@符号

因为为了让vscode认识@符号并提出提示

2.配置步骤分为2步

1.在tsconfig.json中添加

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2.核心步骤:

1.添加配置

在vite.config.ts中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用nodejs的模块，可能会报错，需要安装node的类型声明文件
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

2.安装包

npm i @types/node -D 或 yarn add @types/node -D

注意：修改完 vite.config.ts 文件需要重启vscord

注意,在这个过程在会报下面这个错误

不支持“path”的动态要求

编辑

我自己在那研究了老半天,用很简单的方法解决了

在 vite.config.ts文件中把const path = require('path') 注释 ,引入 import path from 'path'

编辑

这个方法,是我自创的,有误的话,欢迎大家提出更宝贵的意见

配置@路径