vscode vue3 ts @别名 的问题，请教

Question

<style lang="scss" scoped>
@import '@/assets/css/base.scss';  这里可以识别, 但点击这个 会找不到这个文件
</style>
<script lang="ts">
import router from "@/router"   这里直接报错,    写成这样才成: import router from "../router"

</script>
我的配置:

tsconfig.json---------------
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@": ["src"]
    }
  },

vite.config.ts ------------------------
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

export default defineConfig({
  plugins: [vue()],
  base: "./",
  resolve: {
    alias: {
    "@": path.resolve(__dirname, "src")
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve('src/assets/css/theme.less')}";`,
        },
        javascriptEnabled: true
      },
      sass:{
         //以下这段配置没写对,组件 中无法引用scss 全局变量. 不知道要怎么弄,
        // prependData: `@import "src/assets/css/base.scss";`, 
        additionalData: `@import "src/assets/css/base.scss";`,
      }
    }
  }
})

Answer 1

请参考这个进行设置:

第一行是识别,
第二行及其它行是为了后边的模块导入
以route为例：

 "@router/*": ["src/router/*"],
"@router": ["src/router"],

// 调用
import router from "@router"

Demo：

"paths": {
      "@/*": ["src/*"],
      "@model/*": ["src/api/model/*"],
      "@service/*": ["src/api/service/*"],
      "@handler/*": ["src/api/handler/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["src/utils/*"],
      "@router/*": ["src/router/*"],
      "@store/*": ["src/store/*"],
      "@components/*": ["src/components/*"],
      "@request": ["src/utils/request"],
      "@router": ["src/router"],
      "@store": ["src/store"],
      "@storage": ["src/utils/storage"]
    }

参考：

vue3+ts+vite+vscode导入路径配置 - 简书 引言 项目中的结构比较固定的，而通常在实际的开发中，会大量的涉及到使用import语法，一般都是会采用@路径别名的方式，去进行定位文件夹，那么在vue3+ts+vite+vs... https://www.jianshu.com/p/e0e62d22fa6d

vite+ts vscode无法识别别名路径_chendf_的博客-CSDN博客_vite 别名无效 在vite+ts项目中，在vite.config.ts中配置了别名，在其他文件中使用别名，vscode会报错说找不到这个模块vite.config.ts配置// ...resolve: { // 配置别名 alias: { '@': path.join(__dirname, './src'), '@components': path.join(__dirname, './src/components'), '@utils': path.join(__ https://blog.csdn.net/chendf__/article/details/115515736