vscode认识@符号并提出提示

在vue3+ts中不能像vue2中'@/'直接到根目录然后输出路径,因此需要我们收到安装一下.

主要分为两个步骤:

1.修改tsconfig.json.增加以下的配置

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

2.配置路径别名,方便导入@使用

1.在vite.config.ts中增加配置

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.需要安装node的类型声明文件npm i @types\node -D 或yarn add @types\node -D

最最最重要的--重启vscode

不过在运行的过程会出现一个错误---不支持"path"的动态要求

在网上找到一个方法,就是在vite.config.ts文件中把const path = require('path')注释,引入import path from 'path'

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