docker build vue3 与 node:16-buster-slim 上的 element-ui 不兼容

Posted 2023-02-22

【中文标题】docker build vue3 与 node:16-buster-slim 上的 element-ui 不兼容

【英文标题】：docker build vue3 not compatible with element-ui on node:16-buster-slim

【发布时间】：2022-01-03 09:46:48

【问题描述】：

码头文件：

FROM node:16-buster-slim
RUN apt-get update

WORKDIR /app
COPY package.json /home
RUN npm install --prefix /home

package.json

  "name": "test",
  "version": "0.1.0",
  "private": false,
  "scripts": 
    "dev": "vue-cli-service serve --mode development --host 0.0.0.0",
    "serve": "vue-cli-service serve --mode production --host 0.0.0.0",
    "build": "vue-cli-service build",
    "jest": "vue-cli-service test:unit --watchAll",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "dateformat": "^5.0.2",
    "element-plus": "^1.1.0-beta.9",
    "element-ui": "^2.15.6",
    "lib-flexible": "^0.3.2",
    "ol": "^6.6.1",
    "spark-md5": "^3.0.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuelayers": "^0.11.36",
    "vuex": "^4.0.0-0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "fs-extra": "^10.0.0",
    "lint-staged": "^9.5.0",
    "mockjs": "^1.1.0",
    "node-sass": "^4.14.1",
    "px2rem-loader": "^0.1.9",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  ,
  "gitHooks": 
    "pre-commit": "lint-staged"
  ,
  "lint-staged": 
    "*.js,jsx,vue": [
      "vue-cli-service lint",
      "git add"
    ]
  

步骤：运行 npm install --prefix /home ---> 运行在 fc08d7e933ed npm 通知 npm 通知 npm 新补丁版本可用！ 8.1.0 -> 8.1.4 npm 通知变更日志：https://github.com/npm/cli/releases/tag/v8.1.4 npm notice 运行npm install -g npm@8.1.4进行更新！ npm 通知 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖树 npm 错误！ npm 错误！解决时：artemis@0.1.0 npm 错误！找到：vue@3.2.22 npm 错误！节点模块/vue npm 错误！ vue@"^3.0.0" 来自根项目 npm 错误！ npm 错误！无法解决依赖关系： npm 错误！对等 vue@"^2.5.17" 来自 element-ui@2.15.6 npm 错误！ node_modules/element-ui npm 错误！ element-ui@"^2.15.6" 来自根项目 npm 错误！ npm 错误！修复上游依赖冲突，或者重试 npm 错误！此命令与 --force 或 --legacy-peer-deps npm 错误！接受一个不正确的（并且可能被破坏的）依赖 分辨率。 npm 错误！ npm 错误！有关完整报告，请参阅 /root/.npm/eresolve-report.txt。

                                                                                                                                                                                                                                                                                                        npm ERR! A complete log of this run can be found in:                  

npm 错误！ /root/.npm/_logs/2021-11-25T01_40_08_953Z-debug.log

但是这个package.json 在node:lts-alpine 基础镜像上运行良好

【参考方案1】：

您似乎对peer dependencies 有问题，如果您只是将您的npm 设置为使用旧的依赖逻辑来安装您的包，您将解决问题。

只需在运行 npm install 之前将此设置添加到您的 Dockerfile：

...
COPY package.json /home
RUN npm config set legacy-peer-deps true
RUN npm install --prefix /home

要了解此标志的作用，我建议您阅读this SO answer 对其进行了广泛解释。