Vue基础教程（161）精通Vue CLI和Vite之配置文件package.json：魔法秘籍大公开：手把手教你玩转Vue CLI和Vite的“心脏”package.json

原创

于 2025-10-05 06:00:54 发布 · 863 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #json #前端

一、前言：别小看这个“不起眼”的配置文件

嘿，Vue开发者们！有没有遇到过这种场景：新拉一个项目，npm install后一脸懵逼，不知道该怎么启动？或者看着同事行云流水地敲着npm run dev、npm run build，心里默默疑惑：这些命令到底是从哪冒出来的？

答案就藏在项目根目录下那个看似普通的package.json文件里！

很多新手会把package.json简单理解为“依赖列表”，但它的能耐远不止于此。这就像把哈利波特的魔杖当成搅拌棒——太大材小用了！

今天，我们就来深度解剖这个Vue项目的“心脏”，不管你是Vue CLI的忠实用户，还是已经投入Vite怀抱的弄潮儿，掌握package.json的奥秘，都能让你的开发体验从此不同。

二、 package.json：不只是依赖列表，更是项目管家

2.1 这货到底是什么？

简单来说，package.json就是你的项目的“身份证”+“说明书”+“工具箱”三合一。

想象一下，你要组装一个乐高模型：

身份证：模型叫什么名字（name）、什么版本（version）
说明书：怎么组装（scripts）、需要哪些零件（dependencies）
工具箱：组装时需要什么特殊工具（devDependencies）

package.json在Vue项目里扮演的就是这个角色。它告诉npm（Node Package Manager）：“嘿，这是我的基本信息，这些是我运行需要的依赖，这些是我开发时需要的工具，还有这些是我能执行的命令！”

2.2 核心字段深度解读

让我们打开一个典型的Vue项目package.json，看看里面的门道：

{
  "name": "my-awesome-vue-app",
  "version": "1.0.0",
  "description": "一个超酷的Vue3项目",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "serve": "vue-cli-service serve",
    "build:cli": "vue-cli-service build",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "vue": "^3.3.0",
    "vue-router": "^4.2.0",
    "pinia": "^2.1.0",
    "axios": "^1.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9",
    "@vue/cli-service": "^5.0.8",
    "eslint-plugin-vue": "^9.15.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

重点字段解析：