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

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

问题原因

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

解决方法

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

npm i @types/node -D

在vite.config.ts中配置别名

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内容是：

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

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

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

这样就可以正常应用了

原文地址：https://blog.csdn.net/qq_43206280/article/details/143776817

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！