WebStrom+Vitesse+Vue3项目路径报错爆红问题

1.编译运行报错

①安装@types/node依赖。

shell 复制代码

npm i @types/node --save-dev

②修改配置文件vite.config.ts，添加path引用和路径解析配置

typescript 复制代码

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

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
});

2.可正常编译执行，仅编译器爆红

修改tsconfig.json 中compilerOptions 配置项。我添加该配置发现不生效，可能是因为tsconfig.app.json 中有该配置项，覆盖导致不生效，直接修改tsconfig.app.json即可

json 复制代码

"compilerOptions": {
    "baseUrl": "./",
    "paths":{
      "@/*": ["src/*"],
    },
      ...
  }

补充内容：

-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。）

--save-dev 则添加到 package.json 文件 devDependencies下

dependencies是运行时的依赖，
devDependencies是开发时的依赖。

原文：npm install 安装依赖包 --save、--save-dev、-S、-D的区别_install包到dependencies-CSDN博客

使用vite创建vue3项目中会自动生成三个tsconfig相关的文件，分别是：tsconfig.json、tsconfig.node.json、tsconfig.app.json。tsconfig.node.json是专门用来配置vite.config.ts文件的编译规则，tsconfig.app.json则是用来定义项目中其他文件的ts编译规则。后面两个文件最终会被引入到tsconfig.json中。

原文：tsconfig.node.json、tsconfig.app.json、tsconfig.json配置项-CSDN博客

参考资料：

1.vue3+vite中使用@不能找到模块 Cannot find module '@/utils/request' or its corresponding type declarations-CSDN博客

2.简化大型 Vue + Vite 项目的路径管理：path 模块与 @ 别名的完美结合今天，我们将探讨如何通过简单的配置， - 掘金