vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue package.json

Vue 项目 package.json 完整示例详解(主流实践 / 逐项说明)

作者:hhzz

本文提供Vue3+Vite项目配置模板,集成TypeScript、Pinia、VueRouter等工具,涵盖包管理器(pnpm)、代码规范、测试及提交流程配置,重点说明版本控制策略、依赖覆盖注意事项与常见构建问题排查方案,感兴趣的朋友一起看看吧

面向 Vue3 + Vite 技术栈,附完整示例与每个字段的用途、取值建议、易踩坑位。示例采用 TypeScript + Pinia + Vue Router + Vitest + ESLint + Prettier + Husky + Lint-Staged,并固定包管理器为 pnpm(可切换为 npm/yarn)。

一、package.json 完整示例

一个主流的 package.json 完整示例(可直接用)

{
"typescript": "~5.4.0",
"vue-tsc": "^2.0.29",
"vitest": "^2.0.5",
"@vitest/coverage-v8": "^2.0.5",
"eslint": "^9.8.0",
"@eslint/js": "^9.8.0",
"eslint-plugin-vue": "^9.26.0",
"@typescript-eslint/parser": "^8.0.0",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"prettier": "^3.3.3",
"eslint-config-prettier": "^9.1.0",
"lint-staged": "^15.2.8",
"husky": "^9.1.4",
"cross-env": "^7.0.3",
"rollup-plugin-visualizer": "^5.12.0",
"vite-plugin-inspect": "^0.8.0",
"postcss": "^8.4.41",
"autoprefixer": "^10.4.20",
"tailwindcss": "^3.4.10"
},
"lint-staged": {
"*.{ts,tsx,vue,js}": ["eslint --fix", "prettier --write"],
"*.{css,scss,md,json}": ["prettier --write"]
},
"browserslist": [
"last 2 versions",
"> 1%",
"not dead",
"not op_mini all"
],
"overrides": {
"minimatch": "^9.0.4"
},
"resolutions": {
"glob-parent": "~6.0.2"
},
"publishConfig": {
"access": "public"
},
"sideEffects": false,
"author": "Your Name <you@example.com>",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": "git+https://github.com/yourorg/acme-vue-app.git"
},
"bugs": {
"url": "https://github.com/yourorg/acme-vue-app/issues"
},
"homepage": "https://github.com/yourorg/acme-vue-app#readme",
"volta": {
"node": "20.16.0",
"pnpm": "9.6.0"
}
}

说明:以上 JSON 合法且可直接使用。其中 overrides(npm)与 resolutions(yarn)二者并存仅为演示,实际项目按所用包管理器择一;pnpm 推荐使用 pnpm.overrides(见下文“变体”)。

二、字段逐项详解(用途、取值、坑位)

2.1、元信息

2.2、运行环境与包管理

2.3、脚本(scripts)

lint/lint:fix:ESLint 静态检查及自动修复。

2.4、依赖分类

2.5、代码质量与提交流程

2.6、目标浏览器

2.7、依赖覆盖/强制解析

2.8、发布与 Tree Shaking

2.9、法务与追踪

2.10、运行时版本固定(可选)

三、脚本常见扩展(可按需添加)

四、依赖清单说明(为何选它们)

五、版本前缀策略(避免“隐性升级”翻车)

配合锁文件(pnpm-lock.yaml/package-lock.json/yarn.lock)提交到仓库,确保环境一致。

六、变体与可选字段

6.1、 使用 pnpm 的覆盖写法

{
  "pnpm": {
    "overrides": {
      "minimatch": "^9.0.4"
    }
  }
}

6.2、 仅 JavaScript 项目(去掉 TS 相关)

删除 typescript、vue-tsc,移除 type-check 脚本。

保留 ESLint(eslint-plugin-vue)与 Prettier 即可。

6.3、 Monorepo(工作空间)

{
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "packageManager": "pnpm@9.6.0"
}

pnpm 推荐用 pnpm-workspace.yaml 管理工作空间范围;yarn/npm 也支持 workspaces。

6.4、 发布型库 与 应用 的区别

6.5、 浏览器兼容更精细

七、落地建议(CI/CD & 团队)

八、常见报错与排查

到此这篇关于Vue 项目 package.json 完整示例详解(主流实践 / 逐项说明)的文章就介绍到这了,更多相关vue package.json内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文