Vue开发时运行npm install命令导致npm包自动升级而引起bug

最近在使用vue3.0开发程序。
今天使用npm install后，程序出现了bug，页面布局乱了，将代码回滚到以前正确的版本，仍然解决不了问题。后来发现，是npm插件更新的原因，新版本的"@vue/compiler-sfc": "3.1.1", 会导致我们的程序出现bug。为什么插件会自动升级呢？因为我的package.json里写的是"@vue/compiler-sfc": "^3.0.7", 这个^ 符号，表示使用npm install时，在保证大版本号不变（这里是3）的前提下，会尽量取最新代码，所以系统就为我自动升级到了3.1.1版本。
项目中的package-lock.json文件并不能够限制npm install命令自动升级插件，而且当package 文件中的声明和lock文件中的声明冲突时npm install 命令可以更改package-lock.json文件（如果不冲突，则不会更改lock文件，比如package里写的是"@vue/compiler-sfc": "^3.0.7" 而 lock 文件里写的是 "@vue/compiler-sfc": "3.1.1"）。package-lock.json反映的是当前系统正在使用的插件的准确版本，比如"@vue/compiler-sfc": "3.1.1" 。 如果package.json中用了^ 符号，而本次安装却只想要使用package-lock.json中记录的准确版本，不想自动升级插件，那么应该使用npm ci 命令。此命令只会按照package-lock.json的记录准确还原版本号，不会升级插件版本，也不会更改package-lock.json文件。

综上，在应用开发过程中，我们可以在package.json里使用"^3.0.7"这种版本号，并结合npm install 命令不断更新到新版本，以便利用新版本特性。而一旦程序开发完成，在发布过程中，一定要使用NPM CI命令，通过PACKAGE-LOCK.JSON准确还原NPM包，防止出现插件自动升级导致的BUG。
另外，在vue开发过程中，一旦发现了代码回滚都解决不了的奇怪问题，那么很可能npm包被升级导致的。可以手动去除package.json里的^ 符号，写成固定版本号，重新编译，观察效果，以便找到出错的包。