vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块

niech_cn2024-11-21 2:04

这里的前提是，文件路径以及文件已存在的情况下还是报错。

问题原因

解决方法

1、安装 "@types/node" 模块，用于处理别名不生效问题

javascript 复制代码

npm i @types/node -D

在vite.config.ts中配置别名

javascript 复制代码

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

1、配置tsconfig.json文件解决找不到模块的问题

这里有个区别，如果tsconfig.json内容是：

javascript 复制代码

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
}

那就需要在tsconfig.app.json中添加

javascript 复制代码

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

这样就可以正常应用了