记录：quasar别名 找不到模块“XXX”或其相应的类型声明

当前项目：quasar-cli+vite构建

问题：配置别名后报错 ‘找不到模块“XXX”或其相应的类型声明’

quasar配置别名按照文档有两种方式

1. 修改/quasar.config.js:

// quasar.config.js
const path = require('path')

module.exports = function (ctx) {
  return {
    build: {
      alias: {
        myalias: path.join(__dirname, './src/somefolder')
      }
    }
  }
}

2.  或者，您可以直接扩展 Vite 配置并将其与现有别名列表合并。 使用 path.join 帮助器来解析您想要的别名的路径。

// quasar.config.js
const path = require('path')

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf, { isServer, isClient }) {
        Object.assign(viteConf.resolve.alias, {
          myalias: path.join(__dirname, './src/somefolder')
        })
      }
    }
  }
}

 按照文档别名配置好之后 业务代码里引入ts文件时会报错

 解决方案：

tsconfig.json修改前

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

修改后：

{
  "extends": "./node_modules/@quasar/app-vite/tsconfig-preset.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "api/*": ["src/api/*"],
      "utils/*": ["src/utils/*"],
      "enums/*": ["src/enums/*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

 主要是对extends引入地址有修改。 paths可以自由配置。

补充 如果引入*.vue文件报错

1. 在src目录下新建 shims-vue.d.ts 文件

2.添入以下代码

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

 

 原创分享一些quasar实际项目中遇到的问题。