vue 项目打包时遇到的一些问题

1. Syntax Error: Thread Loader (Worker 0) Cannot read property ‘length’ of undefined

执行 npm run build 命令后出错如下

E:\> npm run build

> vueproj@0.1.0 build
> vue-cli-service build

\  Building for production...

 ERROR  Failed to compile with 1 error                                                                                     下午1:22:50

 error  in ./src/views/xxx.vue?vue&type=template&id=3b69e1b6&scoped=true

Syntax Error: Thread Loader (Worker 0)
Cannot read property 'length' of undefined

 @ ./src/views/xxx.vue?vue&type=template&id=3b69e1b6&scoped=true 1:0-500 1:0-500
 @ ./src/views/xxx.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.

解决办法

1. 先删除 node_modules 文件夹
2. 再清理一下缓存
   npm cache clean -f
3. 重新安装模块
   npm install

2. code ERESOLVE ERESOLVE unable to resolve dependency tree

E:\> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue006@0.1.0
npm ERR! Found: vue@3.2.28
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"~2" from @fortawesome/vue-fontawesome@2.0.6
npm ERR! node_modules/@fortawesome/vue-fontawesome
npm ERR!   @fortawesome/vue-fontawesome@"^2.0.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\xxx\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Local\npm-cache\_logs\2022-01-23T05_32_31_781Z-debug-0.log

解决办法

npm install --legacy-peer-deps fortawesome --save

--legacy-peer-deps 标志是在v7中引入的，目的是绕过 peerDependency 自动安装；它告诉 NPM 忽略项目中引入的各个 modules 之间的相同 modules 但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。

3. gyp verb cli xxx

npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'D:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'E:\\vueproj\\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@8.4.1
npm ERR! gyp info using node@14.17.3 | 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 find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - executable path is "d:\Anaconda3\python.exe"
npm ERR! gyp verb find Python - executing "d:\Anaconda3\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.8.12"

解决办法

1. 先试试
   npm i --save node-sass

2. 不行就
   cnpm i --save node-sass

4. Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.

E:\>npm run build

> vue006@0.1.0 build
> vue-cli-service build


|  Building for production...

 ERROR  Failed to compile with 1 error                                                                                    下午12:56:18

 error  in ./src/views/xxx.vue?vue&type=style&index=0&id=24408376&scoped=true&lang=scss

Syntax Error: ModuleError: Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.

 @ ./src/views/About.vue?vue&type=style&index=0&id=24408376&scoped=true&lang=scss 1:0-518 1:0-518
 @ ./src/views/xxx.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.

解决办法

1. 首先卸载现有模块
   npm uninstall node-sass
2. 安装使用新模块
   npm i -D sass

5. 参考

解决如上问题参考了下面几篇博客。
[1]. 【前端开发技巧】npm install xxxx --legacy-peer-deps到底做了些什么
https://juejin.cn/post/6971268824288985118
[2]. 解决高版本npm无法解析依赖树的报错 npm i --legacy-peer-deps
http://www.bubuko.com/infodetail-3786718.html
[3]. Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0报错解决方案
https://blog.csdn.net/weixin_44421143/article/details/122243061
[4]. node，npm，vue升级到指定版本
https://www.php.cn/blog/detail/24986.html

.
.
.
.
.
.
桃花仙人种桃树，又摘桃花换酒钱_