Как развернуть приложение Vue?

Ответ 1

Я думаю, вы создали свой проект следующим образом:

vue init webpack myproject

Ну, теперь вы можете запускать

npm run build

Скопируйте index.html и /dist/папку в корневой каталог вашего сайта. Готово.

Ответ 2

Если вы создали свой проект, используя:

vue init webpack myproject

Вам нужно настроить NODE_ENV на производство и запуск, потому что в проекте есть веб-пакет, настроенный как для разработки, так и для производства:

NODE_ENV=production npm run build

Скопируйте каталог dist/ в корневой каталог вашего сайта.

Если вы развертываете с Docker, вам нужен экспресс-сервер, обслуживающий каталог dist/.

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

Ответ 3

в вашем терминале

npm run build

и вы размещаете папку dist. для более подробной информации смотрите это видео

Ответ 4

Если у вас возникли проблемы с вашим путем, возможно, вам нужно изменить assetPublicPath в файле config/index.js в ваш подкаталог:

http://vuejs-templates.github.io/webpack/backend.html

Ответ 5

Один из способов сделать это, не используя VUE-CLI, - это объединить все файлы сценариев в один файл fat js, а затем ссылаться на этот большой файл javascript в основной файл шаблона.

Я предпочитаю использовать webpack в качестве связующего и создать webpack.conig.js в корневой директории проекта. Все конфиги, такие как точка входа, выходной файл, загрузчики и т.д., Хранятся в этом файле конфигурации. После этого я добавляю скрипт в файл package.json, который использует файл webpack.config.js для конфигураций webpack и запускает просмотр файлов и создает связанный файл Js в указанное место в файле webpack.config.js.

Ответ 6

если вы использовали vue-cli и webpack при создании проекта.

Вы можете использовать только

npm запустите команду build в командной строке, и она создаст папку dist в вашем проекте. Просто загрузите содержимое этой папки на ваш ftp и готово.

Ответ 7

Команды для выполнения конкретных кодов перечислены в вашем файле package.json в разделе сценарии. Вот мой пример:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Если вы хотите запустить свой сайт локально, вы можете проверить его с помощью

npm serve

Если вы хотите подготовить свой сайт к производству, вы должны использовать

npm build

Эта команда создаст папку dist, которая содержит сжатую версию вашего сайта.

Ответ 8

Это для размещения на пользовательской папке (если вы хотите, чтобы ваше приложение не было в корне, например, URL/myApp/) - я долго искал этот ответ... надеюсь, он кому-нибудь поможет.

Получите VUE CLI на https://cli.vuejs.org/guide/ и используйте сборку пользовательского интерфейса, чтобы упростить его. Затем в конфигурации вы можете изменить публичный путь на /what/и указать ссылку на него /what.

Посмотрите это видео, в котором объясняется, как создать приложение vue с помощью CLI, если вам нужна дополнительная помощь: https://www.youtube.com/watch?v=Wy9q22isx3U

Ответ 9

Эта команда предназначена для запуска сервера разработки:

npm run dev

Где эта команда предназначена для сборки сборки:

npm run build

Обязательно посмотрите и зайдите в созданную папку под названием "dist".
Затем запустите все эти файлы на свой сервер.

Ответ 10

Я думаю, что вы можете использовать Vue-Cli

Если вы используете Vue CLI вместе с бэкэнд-каркасом, который обрабатывает статические ресурсы как часть своего развертывания, все, что вам нужно сделать, это убедиться, что Vue CLI генерирует встроенные файлы в правильном месте, а затем следуйте инструкциям по развертыванию вашей бэкэнд-каркаса,

Если вы разрабатываете свое приложение веб-интерфейса отдельно от своего бэкэнда - т.е. Ваш бэкэнд предоставляет API-интерфейс для взаимодействия с вашим веб-интерфейсом, то ваш веб-интерфейс по сути является чисто статическим приложением. Вы можете развернуть встроенный контент в каталоге dist на любом статическом файловом сервере, но не забудьте установить правильный baseUrl

Ответ 11

1. npm run build - это приведет к уменьшению и уменьшению кодов

2. сохраните index.html и папку dist в корневой директории вашего сайта.

3. бесплатный хостинг, который может вас заинтересовать - хостинг Firebase.

Ответ 12

Если вы хотите собрать и отправить на удаленный сервер, вы можете использовать cli-service (https://cli.vuejs.org/guide/cli-service.html), вы можете создавать задачи для обслуживания, сборки и развертывания с некоторыми конкретные плагины как vue-cli-plugin-s3-deploy

Ответ 13

Иногда вы можете увидеть You are running Vue in development mode. Make sure to turn on production mode when deploying for production. при развертывании просто npm run build.

Чтобы развернуть его в рабочей среде, в вашем main.js должен быть Vue.config.productionTip = false.

Ответ 14

Лучший и самый чистый способ сделать это - импортировать проект на свой сервер и запустить npm run build с вашего серверного терминала после установки всех модулей и зависимостей вашего проекта. Позднее вы можете создать некоторый скрипт на вашем package.json и дать ему команду, например, npm run deploy чтобы автоматически развертывать с вашей локальной машины.

Таким образом, у вас не будет проблем с vue-router (если вы не настроили проект правильно), а также не нужно "переместить ваш index.html и /dist/folder".