在 Docker 上构建 vue/quasar 应用程序时出错

Question

npm run build ( vue-cli-service build ) 上的 Docker 错误

我正在将一个应用程序容器化，以便在带有 kubernetes 的云服务上使用它。 但是在我的 Dockerfile 的构建阶段，我遇到了 vue-cli-plugin-quasar 的错误。

也许这与 quasar 包和 docker 构建过程中外部包的访问有关，但我是 docker 的菜鸟。

我尝试在管理包（npm i，审计等）之前使用RUN npm i -g @vue/cli 。 并在搜索此问题时一无所获。

尝试使用多阶段 Dockerfile

FROM node:12 as dev-stage

WORKDIR /my-app

COPY package*.json ./

COPY server/ ./server
COPY src/ ./src

RUN npm install -g @vue/cli

RUN npm i

RUN npm audit fix

RUN cd server && npm i

RUN cd server && npm audit fix

FROM dev-stage as build-stage
RUN npm run build

在此之后我有更多阶段，但错误发生在构建中

没有它

FROM node:12 as dev-stage

WORKDIR /my-app

COPY package*.json ./

COPY server/ ./server
COPY src/ ./src

RUN npm install -g @vue/cli

RUN npm i

RUN npm audit fix

RUN cd server && npm i

RUN cd server && npm audit fix

RUN npm run build

错误输出

ERROR  TypeError: Cannot read property 'quasar' of undefined
TypeError: Cannot read property 'quasar' of undefined
    at module.exports (/my-app/node_modules/vue-cli-plugin-quasar/index.js:2:29)
    at /my-app/node_modules/@vue/cli-service/lib/Service.js:83:7
    at Array.forEach (<anonymous>)
    at Service.init (/my-app/node_modules/@vue/cli-service/lib/Service.js:81:18)
    at Service.run (/my-app/node_modules/@vue/cli-service/lib/Service.js:221:10)
    at Object.<anonymous> (/my-app/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)

Obs：我在npm i和 quasar 包之后列出了我的 node_modules 文件夹

Answer 1

我可以通过多级构建来克服这个问题，如下所示：

FROM node:12.14.1-alpine3.11  as get-sources

RUN apk add --no-cache bash && \
    apk update && \
    apk upgrade && \
    apk add git && \
    apk add openssh-client

.....

RUN git clone ssh://git@private-repo.com/user/Project.git

FROM node:12.14.1-alpine3.11 as build-stage

RUN apk update && apk add python make g++ && \
    npm config --global set python2 /usr/bin/python

WORKDIR /app

# copy the repository form the previous stage
COPY --from=get-sources  /Project/src ./

# get dependencies
RUN yarn install --production

COPY ./ .

RUN yarn build

......

# copy dist to final production stage 

基本上，不是仅复制 package.json 并仅根据我复制应用程序的整个源代码安装/构建应用程序，并在该上下文中构建应用程序。 然后在下一阶段，您只复制最终位置中的 /dist 内容。