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

132

Что мне делать после разработки приложения Vuevue-cli ?

В Angular была некоторая команда, которая объединяла все сценарии в один сценарий, а затем эти файлы отправлялись на хост.

Есть ли во Vue что-то подобное ?

artem0071
источник
Он должен быть частью cli, вот страница документации по развертыванию vuejs.org/v2/guide/deployment.html. В зависимости от того, какая у вас версия и какой шаблон вы используете, он, вероятно, будет немного отличаться. Но вы должны указать, что вы делаете производственную сборку, как в документации.
Swimburger
2
Я использую 2.2.1 vue. Я вижу документацию, но нет информации о развертывании. Я не использую nodejs на хостере. Поэтому, когда я запускаю его на локальном хосте, он работает, но когда я загружаю все файлы в хостер, на странице ничего нет
artem0071
8
Когда вы делаете сборку, она, вероятно, скомпилирует все файлы (html, css, js) в папку / dist. Эта папка dist должна быть корнем вашего приложения на вашем хостинге. (Я еще не использовал Vue2, но держу пари, что он будет там)
Swimburger
Эй , ребята , у меня была эта же Prob на прошлой неделе и написал, если чего - л это помогает любому: medium.com/@seenickcode/...
seenickcode
Я загрузил файлы из папки dist в cpanel, но они отображаются только пустыми
Фаяз

Ответы:

171

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

vue init webpack myproject

Что ж, теперь ты можешь бежать

npm run build

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

Егор Стамбакио
источник
1
Разве не нужно бегать npm startили что-то в этом роде?
nu everest
@nueverest, если вы только что создали свой проект, vue init webpack myprojectв консоли вы увидите дальнейшие инструкции: cd myproject, npm install. После того, как npm installвсе пакеты загружены и vue сможет компилироваться либо npm run devс сервером разработки + горячая перезагрузка, либо с помощью npm run buildдля создания развертываемого пакета.
Егор Стамбакио
Похоже, это не работает с vue router ... Я что-то не так делаю?
Энди Хайден
1
@AndyHayden AWS S3 проверяет: 1) index & error document === index.html; 2) для статического сайта установлены политики ; 3) ваш build.jsнаходится внутри distпапки на s3 и index.htmlнаходится в корне.
Егор Стамбакио
9
ответ должен быть «содержание distпапки все , что вам нужно. Вам не нужно копировать , /index.htmlно только index.htmlв distнеобходимости папки. Кроме того, перед запуском npm run buildнеобходимо настроить производственный путь в config/index.js».
Дэвид 天宇 Вонг
24

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

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" ]
akinjide
источник
вы открываете этот контейнер извне или используете nginx или apache в качестве прокси?
Хаким
Да, вы бы использовали Apache или Nginx в качестве прокси, порт 80
akinjide 08
paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app может быть WORKDIR / app? также CMD ["http-server", "dist"] необходим для обслуживания через http-сервер? вместо CMD ["npm", "start"]
LOG_TAG
Версия: webpack 3.12.0 Время: 16548 мс Размер ресурса Чанки Имена блоков build.js 2,15 МБ 0 [отправлено] [большое] main build.js.map 9,74 МБ 0 [отправлено] main - Это появляется после запуска указанного выше cmd в проект папка - не могли бы вы рассказать мне о следующем шаге к жизни? -
Hamendra Sunthwal
7

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

npm run build

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

anasmorahhib
источник
Это неверно предполагает, что сценарий сборки существует в package.json.
авария Спрингфилд
4
@crashspringfield Точное предположение, которое следует сделать, когда OP конкретно спрашивает о приложении Vue, созданном с помощьюvue-cli
Дэн Флетчер
4

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

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

jntme
источник
Обязательно измените build: {..... assetsPublicPath: './', важны точки перед косой чертой. Но в объекте dev в этом файле также есть assetsPublinPath, поэтому обязательно измените правильный.
Shane G
Версия: webpack 3.12.0 Время: 16548 мс Размер ресурса Чанки Имена блоков build.js 2,15 МБ 0 [отправлено] [большое] main build.js.map 9,74 МБ 0 [отправлено] main - Это появляется после запуска указанного выше cmd в проект папка - не могли бы вы рассказать мне о следующем шаге к жизни? -
Hamendra Sunthwal
2

Команды, указывающие, какие конкретные коды следует запускать, перечислены в файле package.json в разделе сценариев. Вот мой пример:

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

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

npm serve

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

npm build

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

Джин Илланес
источник
1

Чтобы развернуть ваше приложение в среде prod, добавьте

"build": "vue-cli-service build --mode prod"

в ваших скриптах в файле package.json.

Откройте свой main.js и добавьте

Vue.config.productionTip = false;

сразу после вашего импорта. Затем откройте свой cli в папке проекта и запустите эту команду

npm run build

Это создаст папку dist в каталоге вашего проекта, вы можете загрузить эту папку dist на свой хост, и ваш веб-сайт будет работать

MaBbKhawaja
источник
1

В документации по vue содержится много информации о том, как можно выполнить развертывание для разных провайдеров хоста.

npm run build

Вы можете найти его в json-файле пакета. раздел скриптов. Он предоставляет сценарии для тестирования, разработки и сборки для производства.

Вы можете использовать такие службы, как netlify, которые объединят ваш проект, подключив репозиторий проекта на github со своего сайта. Он также предоставляет информацию о том, как развернуть на других сайтах, таких как heroku.

Вы можете найти более подробную информацию об этом здесь

Брайан Мванги
источник
При этом создается папка dist, содержащая связанные JS / CSS и HTML, для легкого развертывания в любой службе хостинга
Тайлер Моралес,
0

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

npm run dev

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

npm run build

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

Farcrew Rz
источник
0

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

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

Yash_6795
источник
0

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

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

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

Loveun CG
источник
вы правы, но, как показывает принятый ответ, вопрос заключался в том, после какой команды запускать
JR Utily
0
  1. npm run build - это сократит и минимизирует коды

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

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


источник
0

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

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

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

user3348410
источник
просто загрузите папку dist на свой ftp и готово? и как получить доступ к приложению Vue на сервере?
Hamendra Sunthwal,
0

ЭТО ДЛЯ РАЗВЕРТЫВАНИЯ В ПОЛЬЗОВАТЕЛЬСКУЮ ПАПКУ (если вы хотите, чтобы ваше приложение не было в корне, например, URL / myApp /) - я долго искал этот ответ ... надеюсь, он кому-то поможет.

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

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

Рик К.
источник
0

Сначала установите Vue Cli глобально

npm install -g @vue/cli

Чтобы создать новый проект, запустите:

vue create project-name

запустить vue

npm run serve 

Vue CLI> = 3 использует тот же двоичный файл vue, поэтому он перезаписывает Vue CLI 2 (vue-cli). Если вам все еще нужна устаревшая функциональность vue init, вы можете установить глобальный мост:

Vue Init глобально

npm install -g @vue/cli-init

vue init теперь работает точно так же, как vue-cli@2.x

Приложение Vue Create

vue init webpack my-project

Запустить сервер разработчика

npm run dev
Доктор медицины Джамиль А.Дж.
источник
-1

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

Гилсон Дои Младший
источник