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

Question

码头文件：

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"
    ]
  }
}

Step: RUN npm install --prefix /home
---> Running in fc08d7e933ed npm notice
npm notice New patch version of npm available! 8.1.0 -> 8.1.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.4 npm notice Run npm install -g npm@8.1.4 to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: artemis@0.1.0
npm ERR! Found: vue@3.2.22
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.5.17" from element-ui@2.15.6
npm ERR! node_modules/element-ui
npm ERR! element-ui@"^2.15.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 /root/.npm/eresolve-report.txt for a full report.
                                                                                                                                                                                                                                                                                                        npm ERR! A complete log of this run can be found in:                  
npm ERR! /root/.npm/_logs/2021-11-25T01_40_08_953Z-debug.log

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

Answer 1

看来你在使用 peer dependencies 时遇到了问题，如果你只是将你的 npm 设置为使用遗留依赖逻辑来安装你的包，你就会解决问题。

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

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

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

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

docker build vue3 not compatible with element-ui on node:16-buster-slim

node.js

npm

docker

vue.js