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 是前端项目的 "身份证" 和 "操作手册"，正确配置它对于项目的可维护性和稳定性至关重要。