下载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
> vue-antd-jeecg@2.2.0 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.<anonymous> (/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.<anonymous> (/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! vue-antd-jeecg@2.2.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-antd-jeecg@2.2.0 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$
删除既有依赖 或者手动删除node_modules
rm -rf node_modules/ package-lock.json
重新下载依赖
npm install
或者
cnpm install
如果控制台 npm run install 报错, 那就从项目文件 cmd 进入
方式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