vue3+ts项目打包报错

项目常见报错

👉nprogress类型错误（@types/nprogress）

src/layout/leftAside/index.vue:22:20 - 
error TS2307: Cannot find module '@/router' or its corresponding type declarations.
22 import router from '@/router'

🍎解决方法

// 清除 npm 缓存
npm cache clean --force

// 手动删除依赖包和锁定文件
node_modules 和 package.json 

//未起到作用，证明不是这个的问题

🍎安装对应的进度条的类型

yarn add @types/nprogress

报错解决，就是缺少了这个库的类型

👉属性可能为空错误处理

Property 'hidden' does not exist on type 'never'.
<SideItem v-if="!item.hidden" :key="item.path + index" :sideItemdata="item" />

🍎 属性可能不存在，这里主要是我们类型不全导致这个属性可能为never

处理方式就是改写法 加上配置文件，但是我们这里要将项目快速上线，可以忽略这些警告，设置

"compilerOptions":{
  "noUnusedLocals": false, /* 检查未使用的变量 */
  "noUnusedParameters": false,/* 检查未使用的函数参数 */
}

👉 配置时候提示path错误

// 无法找到模块“path”的声明文件
“d:/LTB-2025/code/NexusVueSuperPro/node_modules/path/path.js”隐式拥有 "any" 类型。
尝试使用 `npm i --save-dev @types/path` (如果存在)
或者添加一个包含 `declare module 'path';` 的新声明 (.d.ts)文件ts(7016)

import { defineEmits } from "vue"

现在无需引入直接即可使用defineEmits

👉找不到模块“@”或其相应的类型声明

🍎原因

错误是因为 TypeScript 无法识别 @ 这个路径别名。

要解决这个问题，需要配置 TypeScript 的路径别名

🍎解决方法

配置tsconfig.json

{
  "compilerOptions": {
   
    /* 路径映射 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"], // 配置 @/* 解析为 src/*
      "@/": ["src/"],
      "@": ["src"]
    }, // 配置模块解析
  "exclude": ["node_modules", "dist"]
}

👉 使用环境配置报错

src\utils\config.ts
在这段代码中，出现了以下错误：

仅当 ‘–module’ 选项为 ‘es2020’、‘es2022’、‘esnext’、‘system’、‘node16’、‘node18’、‘node20’ 或 ‘nodenext’ 时，才允许使用 ‘import.meta’ 元属性。

解决方法

修改 tsconfig.json 文件