002 vue3-admin项目的目录及文件说明之package.json文件

基本概念

package.json 是 Node.js 项目的核心配置文件，包含了项目的元数据、依赖信息、脚本命令等关键配置。它是 npm/yarn/pnpm 等包管理器的基础。

 

文件结构示例

{"name": "vue3-admin","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.22"},"devDependencies": {"@types/node": "^24.10.0","@vitejs/plugin-vue": "^6.0.1","@vue/tsconfig": "^0.8.1","typescript": "~5.9.3","vite": "^7.1.7","vue-tsc": "^3.1.0"}
}

核心字段详解

项目元数据

 

入口与输出配置

 

依赖配置

 

脚本配置

  "scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},

npm run dev  中的dev就是此处的key

引擎与环境配置

 

类型与模块配置

 

发布配置

 

版本号规则

语义化版本（SemVer）

major.minor.patch

• major: 不兼容的 API 变更
• minor: 向下兼容的功能性新增
• patch: 向下兼容的问题修正

版本范围符号

 

高级配置示例

条件导出

"exports": {".": {"import": "./dist/index.esm.js","require": "./dist/index.cjs.js","types": "./dist/index.d.ts"},"./utils": {"import": "./dist/utils.esm.js","require": "./dist/utils.cjs.js"}
}

工作区配置

"workspaces": ["packages/*","apps/*"
]

浏览器兼容性

"browserslist": ["> 1%","last 2 versions","not dead"
]

最佳实践

1 版本控制：将 package.json 加入版本控制2 依赖管理：

• 定期更新依赖：npm update
• 检查安全漏洞：npm audit
• 使用精确版本：考虑使用 --save-exact
   
  3 脚本组织：
• 使用有意义的脚本名称
• 利用 pre/post 钩子
• 保持脚本简洁，复杂逻辑抽离到单独文件

常见问题解决

# 修复依赖版本冲突
npm dedupe# 清理并重新安装
rm -rf node_modules package-lock.json && npm install# 检查依赖树
npm ls# 验证 package.json 格式
npm pkg validate

 

package.json 是前端项目的 "身份证" 和 "操作手册"，正确配置它对于项目的可维护性和稳定性至关重要。