vue 环境搭建之坑----package-lock.json

本文记录了一次使用npm创建Vue项目时遇到的由package-lock.json引起的错误,详细解析了npm5.0以来的安装规则变化,及如何通过调整npm版本解决该问题。

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

按网上安装了node 环境并配置好了环境变量 然后安装了vue 和vue-cli 

这个时候开始创建vue-ex 项目 如图

 

发现没创建成功 npm run dev 更不好用了

一顿度娘寻求答案  最终发现 是package-lock.json 引起的问题

究其原因:原文转载 https://blog.youkuaiyun.com/shang_gege/article/details/80276910

package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。

查阅资料得知,自npm 5.0版本发布以来,npm i的规则发生了三次变化。**

1、npm 5.0.x 版本,不管package.json怎么变,npm i 时都会根据lock文件下载

package-lock.json file not updated after package.json file is changed · Issue #16866 · npm/npm

这个 issue 控诉了这个问题,明明手动改了package.json,为啥不给我升级包!然后就导致了5.1.0的问题...

2、5.1.0版本后 npm install 会无视lock文件 去下载最新的npm

然后有人提了这个issue why is package-lock being ignored? · Issue #17979 · npm/npm

控诉这个问题,最后演变成5.4.2版本后的规则。

3、5.4.2版本后 why is package-lock being ignored? · Issue #17979 · npm/npm

大致意思是,如果改了package.json,且package.json和lock文件不同,那么执行`npm i`时npm会根据package中的版本号以及语义含义去下载最新的包,并更新至lock。

如果两者是同一状态,那么执行`npm i `都会根据lock下载,不会理会package实际包的版本是否有新。

 

解决方案:在你的项目目录中 npm install nmp@6.4.1   如下图    6.4.1 是你电脑安装的npm 的版本号

以上梳理完 这个时候 运行项目  npm run vue-ex

浏览器  http://localhost:8080  成功启动项目

 

npm 爬坑过程记录,学无止境  与君共勉!

### Vue 项目中的 `package.json` 和 `package-lock.json` #### package.json 的作用 `package.json` 是一个非常重要的文件,用于存储关于项目的元信息以及依赖项。在 Vue.js 项目中,此文件描述了项目的名称、版本、描述、作者、依赖项、脚本命令等信息[^1]。 对于 Vue CLI 创建的项目而言,在根目录下存在 `package.json` 文件,该文件不仅定义了项目的基础配置还记录了开发者自行安装的各种模块或库的信息。当其他开发人员克隆仓库并执行 npm install 命令时,npm 将依据 `package.json` 中声明的内容下载所需的依赖包[^4]。 #### package-lock.json 的作用 另一方面,`package-lock.json` 主要用来锁定安装时的具体包版本号。这意味着每当创建一个新的 Vue CLI 项目并且首次安装所有必要的 Node 模块之后,这些模块的确切版本会被记录在这个文件里。因此即使不同环境中重新构建相同的环境也能确保一致性,因为每次都将获取相同版本的软件包。 此外值得注意的是,如果调整某些依赖关系(例如将一些包从 `dependencies` 移至 `devDependencies`),即便具体的包本身没有变化也会引起 `package-lock.json` 发生变动——这通常表现为更新后的条目带有新的属性标记表明它们现在属于开发阶段专用资源[^2]。 #### 区别与联系 尽管两者都位于同一个目录级别内,并且紧密关联着应用程序所需外部库的状态管理机制;然而二者之间存在着本质的区别: - **用途差异**:前者主要用于表达应用层面的需求列表及其基本信息;后者则专注于精确控制各个子依赖之间的兼容性和稳定性。 - **提交策略建议**:鉴于上述特性,推荐做法是保留而非忽略 `.gitignore` 对于这两个文件的规定,从而允许团队成员共享一致的工作副本而不必担心本地机器上可能存在的任何潜在冲突[^3]. ```json // 示例 package.json 配置片段 { "name": "my-vue-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve" }, ... } ``` ```json // 示例 package-lock.json 片段展示如何固定特定版本 { "requires": true, "lockfileVersion": 2, "packages": {}, "dependencies": { "@vue/cli-plugin-babel": "^5.0.8", ... } } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值