Vue package-lock.json的作用及说明

 更新时间:2023年11月01日 08:40:38   作者:三横兰  
这篇文章主要介绍了Vue package-lock.json的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue package-lock.json的作用

package-lock.json有什么作用呢?

简单理解就是锁定dependencies的版本号。

一般来说前端的项目都有一个package.json文件管理依赖的版本号,在package.json文件里我们可以看到依赖的版本号前面一半有^和~这些符号。

  • ^:锁定大版本号,比如是^6.2.2,会匹配所有6.x.x的版本,更新的时候会下载最新的版本号
  • ~:锁定前面两个版本号,比如是^6.2.2,会匹配所有6.2.x的版本,更新的时候会下载最新的版本号
  • *:安装最新的版本号。

不同的下载时间、npm下载源不一样或者不同机器,下载得到的nodejs依赖包有可能不一样。

所以这时候package-lock.json的作用就出来了。

它就是固定当前的版本,确保你安装的包不会因为在新的机器上或者新的

下载源下载依赖包时不一致,这在开发、部署或者多人协作时会减少很多不必要的麻烦。

我们举个例子

当前测试的project的依赖如下

  "devDependencies": {
    "dayjs": "~1.9.4",
    "file-saver": "^1.2.0",
    "lodash": "*"
  },

一般来说新建的项目是没有package-lock.json这个文件,执行npm install时候它会自动生成。

执行npm install后,我们去node-modules目录看下这三个包的版本号。

    "dayjs": "1.9.8",
    "file-saver": "1.3.8",
    "lodash": "4.17.21"

再看下生成的package-lock.json文件

 "dependencies": {
    "dayjs": {
      "version": "1.9.8",
     "dev": true
    },
    "file-saver": {
      "version": "1.3.8",
      "dev": true
    },
    "lodash": {
      "version": "4.17.21",
      "dev": true
    }
  }

node_module依赖包的版本和package-lock.json的版本号是一样的。

dayjs匹配到了1.9.x的最新版本,file-saver匹配到了1.x.x的最新版本,lodash匹配到了最新的版本。

当我们需要去更新依赖包的版本时,可以通过执行npm install xxx@x.x.x实现,package-lock.json也会随之更新。

我本地的npm版本是6.10.2,在package.json中直接修改版本号,然后npm install,也可以实现依赖包的版本和package-lock.json更新。

网上有说法是5版本后不支持这种改法了。

如果下载依赖用的是yarn install,那用的就是yarn.lock文件。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE 组件转换为微信小程序组件的方法

    VUE 组件转换为微信小程序组件的方法

    这篇文章主要介绍了VUE 组件转换为微信小程序组件的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue项目设置打包后的静态文件访问路径

    vue项目设置打包后的静态文件访问路径

    这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • vue动态绘制四分之三圆环图效果

    vue动态绘制四分之三圆环图效果

    这篇文章主要介绍了vue动态绘制四分之三圆环图效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue使用watch 观察路由变化,重新获取内容

    vue使用watch 观察路由变化,重新获取内容

    本篇文章主要介绍了vue使用watch 观察路由变化,重新获取内容 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 22个Vue优化技巧(项目实用)

    22个Vue优化技巧(项目实用)

    演示代码使用 Vue3 + ts + Vite 编写,但是也会列出适用于 Vue2 的优化技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 简单了解前端渐进式框架VUE

    简单了解前端渐进式框架VUE

    这篇文章主要介绍了前端渐进式框架VUE的相关资料,文中讲解的非常细致,帮助大家开始学习VUE,感兴趣的朋友可以了解下
    2020-07-07
  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    这篇文章主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue3中使用props和emits并指定其类型与默认值

    vue3中使用props和emits并指定其类型与默认值

    props是Vue3中的一个重要概念,它允许我们将数据从父组件传递到子组件,下面这篇文章主要给大家介绍了关于vue3中使用props和emits并指定其类型与默认值的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue.js实现立体计算器

    Vue.js实现立体计算器

    这篇文章主要为大家详细介绍了Vue.js实现立体计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue编程格式化代码属性自动换行问题

    Vue编程格式化代码属性自动换行问题

    这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论