JEECG前端编译错误对应方法：vue-cli-service not found

下载jeecg的2.2.0的vue版本，在vue目录下进行npm install之后，使用npm run build构建js文件时提示vue-cli-service not found, 这篇文章介绍一下常见的对应方式。

现象

liumiaocn:ant-design-vue-jeecg liumiao$ npm run build

> [email protected] build /Users/liumiao/jeecg/easypack/jeecg/jeecg-boot/ant-design-vue-jeecg
> vue-cli-service build


⠋  Building for production... ERROR  TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at Object. (/Users/liumiao/jeecg/easypack/jeecg/jeecg-boot/ant-design-vue-jeecg/node_modules/mini-css-extract-plugin/dist/CssDependency.js:12:46)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object. (/Users/liumiao/jeecg/easypack/jeecg/jeecg-boot/ant-design-vue-jeecg/node_modules/mini-css-extract-plugin/dist/index.js:12:45)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
liumiaocn:ant-design-vue-jeecg liumiao$

原因

这是典型的开发环境设定导致的问题，根据JEECG相关的一些issue，排查问题需要确认：

• 确认production的设定：npm config get production
• package-lock.json、yarn-lock.json、node_modules的影响
• npm、cnpm、yarn

方式1: 重新下载依赖

设定为production

liumiaocn:ant-design-vue-jeecg liumiao$ npm config set production true
liumiaocn:ant-design-vue-jeecg liumiao$ 
liumiaocn:ant-design-vue-jeecg liumiao$ npm config get production
true
liumiaocn:ant-design-vue-jeecg liumiao$ 

删除既有依赖

rm -rf node_modules/ package-lock.json 

重新下载依赖

npm install

方式2:

似乎yarn一般没有问题，建议删除node_modules目录和yarn-lock.json（如果有的话），然后依次执行：

• yarn install
• npm run build

一般即可生成dist目录，这也是官方推荐的方案

方式3

使用容器方式构建，我比较推荐这种方式，方式1和方式2我试过多遍，由于使用nvm本地保存多个node和npm版本，全局和本地安装的内容也较多，是否哪些地方有冲突也不容易看出来，但是使用容器化的方式非荣方便，基本不会出现问题。

• Step 1: 比如2.2.0版的JEECG的vue前端，可使用如下版本的node

 docker run -it -v `pwd`:/jeecg-vue node:12.16.1-alpine3.11 sh

• Step 2: yarn install
• Step 3: npm run build

参考issue

https://github.com/zhangdaiscott/jeecg-boot/issues/1135
http://www.jeecg.org/forum.php?mod=viewthread&tid=8868