Почему проект на VueJS не запускается в Docker контейнере?

Как настроить проект VueJS + Vite, упакованный в Docker контейнере приложения, чтобы можно было развернуть его на другом компьютере и обеспечить доступ к этому приложению через браузер?
  • 26 февраля 2024 г. 8:48
Ответы на вопрос 2
Причиной того, что проект на VueJS не запускается в Docker контейнере может быть неправильная конфигурация Dockerfile, отсутствие необходимых зависимостей внутри контейнера или проблемы с портами и сетевым взаимодействием.

Для того чтобы настроить проект VueJS + Vite в Docker контейнере и обеспечить доступ к приложению через браузер, следует выполнить следующие шаги:

1. Создать Dockerfile для вашего проекта. Пример Dockerfile для приложения VueJS + Vite может выглядеть следующим образом:

```Dockerfile
# Установка базового образа
FROM node:16

# Создание и переключение рабочей директории
WORKDIR /app

# Установка зависимостей проекта
COPY package.json .
COPY yarn.lock .
RUN yarn install

# Копирование исходного кода в контейнер
COPY . .

# Сборка проекта
RUN yarn build

# Указание порта, на котором будет работать приложение
EXPOSE 3000

# Запуск сервера приложения
CMD ["yarn", "serve"]
```

2. Собрать Docker образ с помощью команды `docker build -t my-vue-app .`. Убедитесь, что все зависимости проекта устанавливаются корректно и проект успешно собирается внутри контейнера.

3. Запустить Docker контейнер с помощью команды `docker run -p 3000:3000 my-vue-app`. Опция `-p 3000:3000` прокидывает порт 3000 контейнера на порт 3000 на хост-машине.

4. После запуска контейнера, откройте браузер и перейдите по адресу `http://localhost:3000` для доступа к вашему приложению VueJS + Vite.

Если приложение все равно не запускается, просмотрите логи контейнера с помощью команды `docker logs <container_id>` для выявления проблемы. Также убедитесь, что все необходимые зависимости и конфигурации правильно настроены для работы в Docker контейнере.
Очевидно надо достать кусок кода в index-yQz08yST.js:9:2359 (девятая строка 2359 символ) и посмотреть в чём там проблема. 
Навскидку по тексту ошибки могу предположить, что там используется optional chaining ( foo?.bar ) или nullish coalescing ( foo ?? bar ), а версия браузера у вас там старая и не поддерживает такой фичи.

...upd: судя по user-agent там хром 70, а минимум для этих фич - хром 80.
Если моё предположение верно(99%), то у вас два варианта: обновить хром на машине, или добавить в билд babel(скорее всего и так добавлен) и прописать в browserlist Chrome <= 70 (а не last 1 , что там скорее всего по умолчанию), чтоб при билде он эти фичи заменил на старые альтернативы.
Похожие вопросы