Home > Back-end >  Docker build doesn't work for VueJS app with Vite working in development
Docker build doesn't work for VueJS app with Vite working in development

Time:11-13

I tried to dockerize a basic VueJS app. I'm using Vite and I kept the basic files automatically generated when I wrote npm init vite@latest client in the terminal. When I run npm run dev I can see everything is OK on http://localhost:5173, and when I run npm run build the files generated in the dist folder are correct.

Although, when I dockerize this app, I have an error. Here is the Dockerfile:

# Build env
FROM node:lts-alpine as build-npm-stage

WORKDIR /cno-vue
COPY package*.json ./
RUN npm install
COPY index.html ./
COPY public ./public
COPY src ./src
COPY .env.production ./

RUN npm run build

# Run env
FROM nginx:stable-alpine
COPY --from=build-npm-stage /cno-vue/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

And here is what I write in the terminal:

docker build --tag cesar/cno-client .

Here is the error I get in the console:

Step 10/15 : RUN npm run build
 ---> Running in 19b4ced0dc36

> [email protected] build
> vite build

vite v3.2.3 building for production...
transforming...
✓ 4 modules transformed.
[vite:build-import-analysis] Parse error @:9:10
file: /cno-vue/src/App.vue:14:0
12:   <div>
13:     <a href="https://vitejs.dev" target="_blank">
14:       <img src="/vite.svg"  alt="Vite logo" />
    ^
15:     </a>
16:     <a href="https://vuejs.org/" target="_blank">
error during build:
Error: Parse error @:9:10
    at parse$b (file:///cno-vue/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:32639:355)
    at Object.transform (file:///cno-vue/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:42077:27)
The command '/bin/sh -c npm run build' returned a non-zero code: 1

I don't see any parsing error... Could somebody explain what did go wrong?

If I delete the incriminated line, I have the same error on another random line...

CodePudding user response:

OK I forgot to copy Vite's conf. I simply had to add:

COPY vite.config.js ./
  • Related