问题（06）npm run build 报错

项目场景：

vue（2.9.6） + elementui

---

问题描述

例如：在执行打包命令时，报错

> vue-cli-service build --mode test
|  Building for test...D:\zjyc\PM\sxgy\project\admin-ls\node_modules\mini-css-extract-plugin\dist\index.js:77
    const resource = this._identifier.split('!').pop();
                                      ^
TypeError: Cannot read property 'split' of undefined
    at CssModule.nameForCondition (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\mini-css-extract-plugin\dist\index.js:77:39)
    at Function.checkTest (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:310:52)
    at Object.fn [as getCacheGroups] (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:250:35)
    at D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:514:38
    at SyncBailHook.eval [as call] (eval at create (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\tapable\lib\HookCodeFactory.js:19:10), <
anonymous>:7:16)
    at SyncBailHook.lazyCompileHook (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\Compilation.js:1236:38)
    at D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\Compiler.js:550:17
    at _done (eval at create (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (D:\zjyc\PM\sxgy\project\admin-ls\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:22)
    at D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\Compilation.js:1093:12
    at D:\zjyc\PM\sxgy\project\admin-ls\node_modules\webpack\lib\Compilation.js:1005:9
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! zhongjincloud@4.2.1 test-build: `vue-cli-service build --mode test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the zhongjincloud@4.2.1 test-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\nodejs\node_cecal\_logs\2023-03-06T01_54_43_477Z-debug.log

Process finished with exit code 1

2023-03-06T01_54_43_477Z-debug.log文件

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'D:\\nodejs\\node.exe',
1 verbose cli   'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'test-build',
1 verbose cli   '--scripts-prepend-node-path=auto'
1 verbose cli ]
2 info using npm@6.14.11
3 info using node@v14.16.0
4 verbose run-script [ 'pretest-build', 'test-build', 'posttest-build' ]
5 info lifecycle zhongjincloud@4.2.1~pretest-build: zhongjincloud@4.2.1
6 info lifecycle zhongjincloud@4.2.1~test-build: zhongjincloud@4.2.1
7 verbose lifecycle zhongjincloud@4.2.1~test-build: unsafe-perm in lifecycle true
8 verbose lifecycle zhongjincloud@4.2.1~test-build: PATH: D:\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\zjyc\PM\sxgy\project\admin-ls\node_modules\.bin;D:\python3.9\Scripts\;D:\python3.9\;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;D:\Python39\Scripts\;D:\Python39\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;D:\nodejs\;D:\svn\bin;"D:\jdk\bin;D:\jdk\jre\bin;";C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;D:\jdk\bin;D:\Git\cmd;D:\vue\vue3\node_modules\.bin;C:\Users\dalong\AppData\Local\Microsoft\WindowsApps;D:\nodejs\node_global;C:\Program Files\Bandizip\;D:\Microsoft VS Code\bin;"D:\jdk\bin;D:\jdk\jre\bin;";D:\PyCharm Community Edition 2021.1.3\bin;;D:\IDEA\IntelliJ IDEA 2021.3.1\bin;;
9 verbose lifecycle zhongjincloud@4.2.1~test-build: CWD: D:\zjyc\PM\sxgy\project\admin-ls
10 silly lifecycle zhongjincloud@4.2.1~test-build: Args: [ '/d /s /c', 'vue-cli-service build --mode test' ]
11 silly lifecycle zhongjincloud@4.2.1~test-build: Returned: code: 1  signal: null
12 info lifecycle zhongjincloud@4.2.1~test-build: Failed to exec test-build script
13 verbose stack Error: zhongjincloud@4.2.1 test-build: `vue-cli-service build --mode test`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (D:\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (D:\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid zhongjincloud@4.2.1
15 verbose cwd D:\zjyc\PM\sxgy\project\admin-ls
16 verbose Windows_NT 10.0.22623
17 verbose argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "test-build" "--scripts-prepend-node-path=auto"
18 verbose node v14.16.0
19 verbose npm  v6.14.11
20 error code ELIFECYCLE
21 error errno 1
22 error zhongjincloud@4.2.1 test-build: `vue-cli-service build --mode test`
22 error Exit status 1
23 error Failed at the zhongjincloud@4.2.1 test-build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

原因分析：

可能是部分插件版本不兼容

---

解决方案：

在package.json中将@vue/cli-service，从3。5.3升级到4.0.3，

"@vue/cli-service": "^4.0.3",

如果切换版本后，出现部分图片（css文件）等资源路径找不到，可修改资源路径。

/*原路径*/
background: url("@/assets/ls/bg_cont_left1.png");

/*新路径*/
background: url("~@/assets/ls/bg_cont_left1.png");

执行npm install 命令，再执行npm run build 命令。