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


<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";`,
      }
    }
  }
})

请参考这个进行设置:

第一行是识别,
第二行及其它行是为了后边的模块导入
以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"]
    }

参考：


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

tsconfig的别名路径那里改成这样子看看

"paths": {
      "@/*": [
        "src/*"
      ]
    }

有用请采纳

tsconfig.json给你参考下


{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "paths": {
      // 用于设置模块名到基于baseUrl的路径映射
      "@/*": ["src/*"]
    },
    "types": ["element-plus/global"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

vite.config.ts


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    host: '0.0.0.0' // 开始ip

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})