部署vue项目的常见问题汇总--许锅锅

vue项目的常见问题

提示：最后有很多朋友在部署vue前端项目的时候会遇到很多这样或者那样的问题，本锅锅进行简单的整理，希望对大家有所帮助哦！！！

版本问题/控制台指令识别问题【node和npm的版本要对应】

提示：这个问题很常见，需要大家参考错误的日志具体内容来处理即可

set-ExecutionPolicy RemoteSigned

Set-ExecutionPolicy RemoteSigned` 是一个 Windows PowerShell 命令，用于设置 PowerShell 执行策略。执行策略用于控制是否允许在系统上运行脚本，以及允许哪些来源的脚本运行。

• Set-ExecutionPolicy: 这个命令用于设置 PowerShell 的执行策略。
• RemoteSigned: 这是一个执行策略的选项，表示允许在本地计算机上运行本地脚本，但远程脚本必须由可信发布者签名后才能运行。

运行 Set-ExecutionPolicy RemoteSigned 命令会将执行策略设置为 “RemoteSigned”，允许本地脚本无需签名，但要求远程脚本必须由可信发布者签名才能运行。

在执行这个命令时，可能会出现以下情况：

1. 如果你以管理员权限运行 PowerShell，则该命令会生效。
2. 如果你没有管理员权限，则可能会收到权限不足的错误消息。在这种情况下，你需要使用管理员权限重新打开 PowerShell 窗口，然后再运行该命令。

加载慢的问题【设置镜像即可】

提示：这个问题就是刚开始大家没有进行设置就可以了 1、https://registry.npm.taobao.org 2、https://registry.npmmirror.com/

设置淘宝镜像

# 设置
npm config set registry https://registry.npm.taobao.org
# 查看
npm config get registry
# 测试是否可以使用，安装vue新项目来测试
npm init vue@latest

cmd窗口内容

C:\Users\xuguoguo>npm config set registry https://registry.npm.taobao.org
C:\Users\xuguoguo>npm config get registry
https://registry.npm.taobao.org/
C:\Users\xuguoguo>cd Desktop
C:\Users\xuguoguo\Desktop>cd MyWork
C:\Users\xuguoguo\Desktop\MyWork>npm init vue@latest
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ Project name: ... YQKSH
√ Package name: ... yqksh

npm/cnpm install的问题

C:\Users\xuguoguo>npm config get registry
https://registry.npmmirror.com/

C:\Users\xuguoguo>npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
C:\Users\xuguoguo>npm config get registry

https://registry.npmmirror.com/

npm WARN deprecated core-js@3.6.5: core-js@＜3.23.3 is no longer maintained and not recommended for

前core-js@2已经放弃维护了，所以要装3以上的版本。目前我用的是3.4.1 我启动的时候出现的问题为 This dependency
was not found: core-js/modules/es.error.cause.js in
./node_modules/@babel/runtime/helpers/createForOfIteratorHelper.js,
./src/directive/permission/hasPermi.js and 5 others To install it, you
can run: npm install --save core-js/modules/es.error.cause.js

解决方法：

1、先删除 node_modules 依赖

npm rm -rf node_modules

2、首先安装 报错的插件

npm install --save core-js

3、最后再 npm install 或者 yarn install

npm install
yarn install

4、最后 npm run dev 运行启动

npm run dev

core js@❤️2.6.12—>3.23.3不再维护，由于问题数量众多，不建议使用。需要升级core-js的版本
使用如下命令更新版本：

npm i core-js
或者
npm i core-js@3.35.0【指定版本安装也是可以的】
npm install --save  -g core-js@^3.35.0【这个肯定没问题哦！！！】

Vue-cli 3.x 脚手架搭建的 Vue 2.x 项目进行 npm install 安装时报错:

npm WARN deprecated highlight.js@9.18.0: Version no longer supported.
Upgrade to @latest npm WARN deprecated core-js@2.6.12: core-js@❤️.23.3
is no longer maintained and not recommended for usage due to the
number of issues. Because of the V8 engine whims, feature detection in
old core-js versions could cause a slowdown up to 100x even if nothing
is polyfilled. Some versions have web compatibility issues. Please,
upgrade your dependencies to the actual version of core-js. npm WARN
deprecated core-js@3.19.1: core-js@❤️.23.3 is no longer maintained and
not recommended for usage due to the number of issues. Because of the
V8 engine whims, feature detection in old core-js versions could cause
a slowdown up to 100x even if nothing is polyfilled. Some versions
have web compatibility issues. Please, upgrade your dependencies to
the actual version of core-js. npm ERR! code 1 npm ERR! path
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\node-sass
npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe
/d /s /c node scripts/build.js npm ERR! Building: C:\Program
Files\nodejs\node.exe
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\node-gyp\bin\node-gyp.js
rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags=
–libsass_library= npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli ‘C:\Program
Files\nodejs\node.exe’, npm ERR! gyp verb cli
‘D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\node-gyp\bin\node-gyp.js’,
npm ERR! gyp verb cli ‘rebuild’, npm ERR! gyp verb cli
‘–verbose’, npm ERR! gyp verb cli ‘–libsass_ext=’, npm ERR! gyp
verb cli ‘–libsass_cflags=’, npm ERR! gyp verb cli
‘–libsass_ldflags=’, npm ERR! gyp verb cli ‘–libsass_library=’ npm
ERR! gyp verb cli ] npm ERR! gyp info using node-gyp@3.8.0 npm ERR!
gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp verb command
rebuild [] npm ERR! gyp verb command clean [] npm ERR! gyp verb clean
removing “build” directory npm ERR! gyp verb command configure [] npm
ERR! gyp verb check python checking for Python executable “python2” in
the PATH npm ERR! gyp verb which failed Error: not found: python2 npm
ERR! gyp verb which failed at getNotFoundError
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete
(node:fs:198:21) npm ERR! gyp verb which failed python2 Error: not
found: python2 npm ERR! gyp verb which failed at getNotFoundError
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete
(node:fs:198:21) { npm ERR! gyp verb which failed code: ‘ENOENT’ npm
ERR! gyp verb which failed } npm ERR! gyp verb check python checking
for Python executable “python” in the PATH npm ERR! gyp verb which
failed Error: not found: python npm ERR! gyp verb which failed at
getNotFoundError
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete
(node:fs:198:21) npm ERR! gyp verb which failed python Error: not
found: python npm ERR! gyp verb which failed at getNotFoundError
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E
(D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\which\which.js:80:29)

开发环境 npm，node.js 版本和现在都不一样，比较旧了，项目之前是用 Vue-cli 3.x 搭建的，Vue 2.x 写的，当时配套的第三方依赖版本也都很落后了，在近期想重新打开之前的项目，看看之前项目成果，是否还有哪些值得学习借鉴或者改进的地方，但原项目 git 权限已无，本地保存的还有原项目备份，但是没有 node_modules 文件夹的，所以需要 npm install 安装一下依赖，但是始终安装不成功，一直报下面的错误（换了 cnpm 和 yarn 安装 也是报类似错误）。

原因分析：

npm ERR! code 1 npm ERR! path
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\node-sass

得出是和 node-sass 这个依赖相关的错误提示，那会不会就是 node-sass 一直安装失败导致的呢？然后我就看了一下 package.json 里有这个依赖项，我就先把这个依赖删除，再 npm install 就成功了，就此确定了我的猜想，就是 node-sass 一直安装不成功，不成功的原因是项目以前需要的 node-sass 版本和我现在的开发环境（node.js版本）不兼容的原因了，因为以前这个版本安装是没问题的，package.json 还是原来的版本，没有改动过，唯一变动的就是我本地的 node.js(v16.x) 和 npm(v8.x) 版本。

注：我的项目里 node-sass 和 sass-loader 是安装在了 devDependencies 里面，所以下面 npm
安装指令后面都加了 -D

dependencies 和 devDependencies 的区别：
dependencies：指定运行该应用程序所需的依赖项，这些依赖项在生产环境中需要被安装和使用。
devDependencies：指定开发该应用程序所需的依赖项，这些依赖项只在开发阶段需要被安装和使用，不会被部署到生产环境中。
因此，在实际项目中，通常将生产环境需要的依赖项放入 dependencies 字段，而将开发工具、测试框架等只在开发阶段需要的依赖项放入
devDependencies 字段。这样可以避免在生产环境中不必要地安装或使用一些开发时需要的库或工具，减小项目打包后的体积。

解决方案：

1、首先通过 node -v 和 npm -v 分别查看当前安装的 node.js、npm 版本，再按照匹配表看这两者版本是不是相匹配的。
在这里插入图片描述 注：本地安装的 node.js 和 npm 大版本最好是相匹配的，否则在 npm install
安装依赖时会遇到很多一些兼容性问题，导致安装不成功。 上面是我本地的 node.js(v16.18.1) 和 npm(v8.19.2)
版本号，大版本相匹配。排除 node.js 和 npm 版本不兼容问题。 node.js 和 配套 npm 版本对照表

2.确认 node-sass 和 node.js 版本是否相匹配。查阅对照表：请注意，这只是一份大致的参考表，因为某些版本之间也可能存在不兼容性。建议查看每个模块的官方文档以获得更准确的信息。
请注意，这只是一份大致的参考表，因为某些版本之间也可能存在不兼容性。建议查看每个模块的官方文档以获得更准确的信息。

3、项目 package.json 中 node-sass 安装的是 4.14.1 版本，和我当前 node.js 16.18.1
不匹配，所以需要升级 node-sass 版本（npm install -D node-sass@8.0.0
我安装的是8.0.0版本），sass-loader 也需要做升级，这两个依赖是相关联的，但是升级 sass-loader 时遇到了如下问题：
由于没有指出安装 sass-loader 的具体版本，默认安装的 13.2.2 最新版需要 webpack 5.x 以上支持，而我本地的
webpack 是 4.x ，于是我就指定了 sass-loader 版本为 10，使用指令：npm install
sass-loader@10 -D 下面是 node-sass 和 sass-loader 版本对照表，上面未指定 sass-loader
版本时默认安装最新版就会失败，可能也是 node-sass 8.0.0 和 sass-loader 13.2.2 版本不匹配原因。
请注意，这只是一份大致的参考表，因为某些版本之间也可能存在不兼容性。建议查看每个模块的官方文档以获得更准确的信息。

总结：

• 1、删除 node_modules 文件夹，将 package.json 中的 node-sass 和 sass-loader 依赖项删除。
• 2、安装所有依赖：npm install
• 3、安装 node-sass：npm install node-sass -D (未指定版本安装失败时，再按照对照表指定当前 node.js 版本所匹配的 node-sass 版本进行安装，node.js 16.x 对照的版本是 node-sass 8.x， 我这里未指定版本，自动给我匹配的 8.0.0 版本)
• 4、安装 sass-loader： npm install sass-loader@10 -D （因为我的 node-sass 是 8.0.0 版本，所以安装的是 10.x 版本）

最后问题解决，项目不再报错，成功运行。

npm ERR! While resolving: sass-loader@10.2.0 npm ERR! Found: node-sass@7.0.1

1、报错信息

npm ERR! While resolving: sass-loader@10.2.0 npm ERR! Found: node-sass@7.0.1

2、原因分析

sass-loader与node-sass版本不对应，应降低sass-loader版本。

3、解决方案

1、单独安装node-sass
npm install --unsafe-perm node-sass
2、安装指定版本sass-loader
npm install sass-loader@7.3.1

Error: Cannot find module ‘webpack/lib/RuleSet‘

Starting development server...
 ERROR  Error: Cannot find module 'webpack/lib/RuleSet'
Require stack:
- D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\vue-loader\lib\plugin-webpack4.js      
- D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\vue-loader\lib\plugin.js
- D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\@vue\cli-service\lib\config\base.js    
- D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\@vue\cli-service\lib\Service.js        
- D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\@vue\cli-service\bin\vue-cli-service.js
PS D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study> npm i webpack@4.29.5 --force 

这个问题是因为高版本的node 默认装了7以上的npm版本。这个版本会要求强制解决peer-dependency的冲突
导致安装的wepback不对。如果一定要使用高版本的node 和npm。可以使用

npm i webpack@4.29.5 --force

前提是webpack 4能正常的和其他插件工作否则就降一下node和npm版本 最高到node 12

ERROR Error: Cannot find module ‘cache-loader‘ 报错问题

error  in ./src/App.vue?vue&type=template&id=7ba5bd90
Syntax Error: Error: Cannot find module 'cache-loader'
Require stack:
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\vue-loader\lib\loaders\pitcher.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\loader-runner\lib\loadLoader.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules\loader-runner\lib\LoaderRunner.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\node_modules\webpack\lib\NormalModule.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\node_modules\webpack\lib\Compiler.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\node_modules\webpack\lib\webpack.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\lib\commands\serve.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\lib\Service.js
D:\myself\演示\Springboot+Vue在线教育平台\前端\online-study\node_modules@vue\cli-service\bin\vue-cli-service.js

产生原因：

node版本高，npm 升级到 7.x以上后，会出现上游依赖冲突

1、解决办法：

npm i --legacy-peer-deps

2、解决办法：

• 1.进入项目的文件夹目录，删除node_modules文件和package-lock.json文件。注意不是package.json（如果删不掉，看下项目是不是打开了，关了再试试）
• 2.输入npm install 安装依赖
• 3.启动项目就可以正常启动了

小结

提示：本小节内容记载的是在部署vue前端项目中常见的几个问题，你还知道哪些常见问题需要处理的呢？？？可留言哦！

多学一招，偷偷的努力，然后惊艳所有人！！！卷就完了……

本小节完毕，敬请期待后续更新（可留言需要学习哪方面的内容哈）！如果需要源码或者工具的朋友们可关注微信公众号"锅锅编程生活"或者扫描二维码关注回复关键字/后台留言获取即可！