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

Posted 2023-02-22

【中文标题】在 Docker 上构建 vue/quasar 应用程序时出错

【英文标题】：Error while building vue/quasar app on Docker

【发布时间】：2020-01-03 02:09:45

【问题描述】：

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 之后列出了我的 node_modules 文件夹，并且 quasar 包就在那里

【参考方案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://[e-mail]/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 内容。