Vue之package.json内容详解

最新推荐文章于 2025-03-17 18:24:41 发布

82年的辣鸡

最新推荐文章于 2025-03-17 18:24:41 发布

阅读量2.2w

点赞数 12

原文链接：https://blog.csdn.net/weixin_30469895/article/details/98114477?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.cont

版权

JavaScript 同时被 2 个专栏收录

21 篇文章

订阅专栏

Vue.js

3 篇文章

订阅专栏

package.json文件是Node.js项目的核心，它定义了项目依赖、脚本、配置等信息。通过修改package.json并运行npm install可更新模块。scripts字段指定运行脚本，dependencies和devDependencies区分项目运行和开发依赖。config字段设置环境变量，engines指定所需node.js版本。bin字段定义可执行文件。同时，文件还涉及eslintConfig和browserslist等配置，确保代码质量和浏览器兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目时会自动生成package.json文件
可以通过修改package.json文件内的内容，再通过npm install进行更新
【直接转到项目目录下用命令npm install 或npm install --save-dev安装即可，自动将package.json中的模块安装到node-modules文件夹下】
package.json中不能添加中文注释，否则会出现编译错误
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
package.json文件可以手工编写，也可以使用npm init命令自动生成。

字段说明

最简单的package.json文件，name即项目名，version即项目版本
```
{
  "name": "kodeblog",
  "version": "0.1.0",
}
```
scripts
指定了运行脚本命令的npm命令行缩写
如下列设置中指定了npm run serve所要执行的命令为vue-cli-service serve【即npm run + 快捷名】
```
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
```

dependencies，devDependencies

	//dependencies --- 项目的依赖,类似于后端的pom.xml,在此处的依赖
	//选择  "build": "vue-cli-service build --mode prod"
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {//devDependencies设定的是开发使用的依赖 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

dependencies — 指定了项目运行所依赖的模块
devDependencies — 指定了项目开发所需要的模块

它们都指向一个对象，该对象的各个成员，分别由模块名和对应的版本要去组成，表示依赖的模块及其版本范围

–save参数表示将该模块写入dependencies属性
–save-dev表示将该模块写入devDependencies属性

config字段
config字段用于向环境变量输出值。

{  
	"name" : "foo",  
	"config" : { "port" : "8080" },  
	"scripts" : { "start" : "node server.js" }  
}

engines 字段
指明了该项目所需要的node.js版本

"engines": {
	"node": ">= 4.0.0",
	"npm": ">= 3.0.0"
},

bin
许多包有一个或多个可执行文件希望被安装到系统路径。在npm下要这么做非常容易(事实上，npm就是这么运行的)。

这需要在你的package.json中提供一个bin字段，它是一个命令名和本地文件名的映射。

安装时：
如果是全局安装，npm将会使用符号链接把这些文件链接到prefix/bin
如果是本地安装，会链接到./node_modules/.bin/

比如，要使用myapp作为命令时可以这么做：
```
{ "bin" : { "myapp" : "./cli.js" } }
```
这么一来，当你安装myapp，npm会从cli.js文件创建一个到/usr/local/bin/myapp的符号链接(这使你可以直接在命令行执行myapp)。

eslintConfig — eslint配置
eslint工具是为了保证代码的一致性和避免一些语法错误

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {//eslint检查的规则
      "generator-star-spacing": "off",
      "no-tabs": "off",
      "no-unused-vars": "off",
      "no-console": "off",
      "no-irregular-whitespace": "off",
      "no-debugger": "off"，
      "id-length": ["warnings", { "min": 1, "max": 20 }] //变量名的长度不能超过20
    }
  },

browserslist — 用以兼容各种浏览器

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

参考：
10. 对package.json的理解和学习
11. vue cli中 package.json文件详解