package.json和package-lock.json的坑（区别）

场景描述

VUE项目里用到了前端iview插件，在package.json中添加依赖

"dependencies": {
        "view-design": "^4.1.1",
}

SVN 项目拉取的package.json，版本是一致的，但是前台部分组件样式不一致。

解析说明

1. package.json用于指定依赖版本号。

   版本号说明：语义版本号分为 X.Y.Z 三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新
       如果只是修复bug，需要更新Z位。
       如果是新增了功能，但是向下兼容，需要更新Y位。
       如果有大变动，向下不兼容，需要更新X位。
   
   版本号主要规则：区别在于版本号前加~和^
   （具体的参考[官网](https://www.npmjs.cn/misc/semver/)，这里是日常的两点）
       1.加~，我理解为更新至最新的补丁版本，
       	~1.2.3：表示安装1.2.x的最新版本（不低于1.2.3），但是不安装1.3.x，也就是说安装时不改变主版本号和次版本号。
           示例：
           ~1.2.3 := >=1.2.3 <1.(2+1).0 := >=1.2.3 <1.3.0
           ~1.2 := >=1.2.0 <1.(2+1).0 := >=1.2.0 <1.3.0 (Same as 1.2.x)
           ~1 := >=1.0.0 <(1+1).0.0 := >=1.0.0 <2.0.0 (Same as 1.x)
           ~0.2.3 := >=0.2.3 <0.(2+1).0 := >=0.2.3 <0.3.0
           ~0.2 := >=0.2.0 <0.(2+1).0 := >=0.2.0 <0.3.0 (Same as 0.2.x)
           ~0 := >=0.0.0 <(0+1).0.0 := >=0.0.0 <1.0.0 (Same as 0.x)
           ~1.2.3-beta.2 := >=1.2.3-beta.2 <1.3.0
       2.加^,我理解为更新至最新的次版本，
       	ˆ1.2.3：表示安装1.x.x的最新版本（不低于1.2.3），但是不安装2.x.x，也就是说安装时不改变主版本号
           示例
           ^1.2.3 := >=1.2.3 <2.0.0
           ^0.2.3 := >=0.2.3 <0.3.0
           ^0.0.3 := >=0.0.3 <0.0.4
           ^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0 
       3.主版本号为0，两者作用相同。
       4.不加固定当前版本不更新
   

2. 执行npm install 后系统生成package-lock.json，用于记录当前项目依赖的版本号，不可更改。锁定当前项目的使用版本，当你清除node_modules或修改package.json 执行npm install时会根据规则将当前的项目依赖更新到相应的版本。

3. 说明一点，为保证版本的一致性，有些公司规定package-lock.json上传，使用指定版本参考，有些规定package-lock.json不上传，当依赖变化时使用最新的依赖。这两者都会造成不同人项目依赖版本的不一致问题。

解决方法

1. 需要协商确定指定版本，回退退或者更新到想要的版本。可以通过设置package.json文件，清除node_modules文件夹，运行npm install，查看package-lock.json确定自己的版本。
2. 不修改package.json文件，单独指定个别依赖

    npm install 依赖名@版本号
    npm install name@X.Y.Z
    示例：指定iview的版本号为4.1.1
    npm install view-design@4.1.1