Он должен быть частью 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 / в корневой каталог вашего сайта. Готово.
Разве не нужно бегать 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" ]
вы открываете этот контейнер извне или используете 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. для получения дополнительной информации см. это видео
Обязательно измените 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 в разделе сценариев. Вот мой пример:
В документации по vue содержится много информации о том, как можно выполнить развертывание для разных провайдеров хоста.
npm run build
Вы можете найти его в json-файле пакета. раздел скриптов. Он предоставляет сценарии для тестирования, разработки и сборки для производства.
Вы можете использовать такие службы, как netlify, которые объединят ваш проект, подключив репозиторий проекта на github со своего сайта. Он также предоставляет информацию о том, как развернуть на других сайтах, таких как heroku.
Вы можете найти более подробную информацию об этом здесь
Один из способов сделать это без использования VUE-CLI - объединить все файлы сценариев в один толстый файл js, а затем указать этот большой толстый файл javascript в основном файле шаблона.
Я предпочитаю использовать webpack в качестве сборщика и создать webpack.conig.js в корневом каталоге проекта. Все конфигурации, такие как точка входа, выходной файл, загрузчики и т. Д., Хранятся в этом конфигурационном файле. После этого я добавляю сценарий в файл package.json, который использует файл webpack.config.js для конфигураций веб-пакетов, и начинаю просматривать файлы и создаю связанный файл Js в указанном месте в файле webpack.config.js.
Если вы используете Vue CLI вместе с серверной инфраструктурой, которая обрабатывает статические ресурсы как часть своего развертывания, все, что вам нужно сделать, это убедиться, что Vue CLI генерирует встроенные файлы в правильном месте, а затем следовать инструкциям по развертыванию вашей внутренней инфраструктуры. ,
Если вы разрабатываете интерфейсное приложение отдельно от бэкэнда, т. Е. Ваш бэкэнд предоставляет API для взаимодействия с вашим интерфейсом, то ваш интерфейс по сути является чисто статическим приложением. Вы можете развернуть собранный контент в каталоге dist на любом статическом файловом сервере, но убедитесь, что установлен правильный baseUrl
просто загрузите папку dist на свой ftp и готово? и как получить доступ к приложению Vue на сервере?
Hamendra Sunthwal,
0
ЭТО ДЛЯ РАЗВЕРТЫВАНИЯ В ПОЛЬЗОВАТЕЛЬСКУЮ ПАПКУ (если вы хотите, чтобы ваше приложение не было в корне, например, URL / myApp /) - я долго искал этот ответ ... надеюсь, он кому-то поможет.
Получите VUE CLI по адресу https://cli.vuejs.org/guide/ и используйте сборку пользовательского интерфейса, чтобы упростить задачу. Затем в конфигурации вы можете изменить общедоступный путь на / любой / и связать его URL / что угодно.
Посмотрите это видео, в котором объясняется, как создать приложение vue с помощью интерфейса командной строки, если вам нужна дополнительная помощь: https://www.youtube.com/watch?v=Wy9q22isx3U
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
Если вы хотите создать и отправить на свой удаленный сервер, вы можете использовать cli-service ( https://cli.vuejs.org/guide/cli-service.html ), вы можете создавать задачи для обслуживания, сборки и развертывания с некоторыми определенные плагины какvue-cli-plugin-s3-deploy
Ответы:
Думаю, вы создали свой проект так:
Что ж, теперь ты можешь бежать
Скопируйте папку index.html и / dist / в корневой каталог вашего сайта. Готово.
источник
npm start
или что-то в этом роде?vue init webpack myproject
в консоли вы увидите дальнейшие инструкции:cd myproject
,npm install
. После того, какnpm install
все пакеты загружены и vue сможет компилироваться либоnpm run dev
с сервером разработки + горячая перезагрузка, либо с помощьюnpm run build
для создания развертываемого пакета.build.js
находится внутриdist
папки на s3 иindex.html
находится в корне.dist
папки все , что вам нужно. Вам не нужно копировать ,/index.html
но толькоindex.html
вdist
необходимости папки. Кроме того, перед запускомnpm run build
необходимо настроить производственный путь вconfig/index.js
».Если вы создали свой проект, используя:
Вам нужно будет настроить
NODE_ENV
и запустить его, потому что в проекте есть веб-пакет, настроенный как для разработки, так и для производства:Скопируйте
dist/
каталог в корневой каталог вашего сайта.Если вы развертываете с помощью Docker, вам понадобится экспресс-сервер, обслуживающий
dist/
каталог.Dockerfile
источник
в вашем терминале
и вы размещаете папку dist. для получения дополнительной информации см. это видео
источник
vue-cli
Если у вас возникнут проблемы с вашим путем, возможно, вам нужно изменить
assetPublicPath
в своемconfig/index.js
файле подкаталог:http://vuejs-templates.github.io/webpack/backend.html
источник
Команды, указывающие, какие конкретные коды следует запускать, перечислены в файле package.json в разделе сценариев. Вот мой пример:
Если вы хотите запустить свой сайт локально, вы можете протестировать его с помощью
Если вы хотите подготовить свой сайт к работе, воспользуйтесь
Эта команда создаст папку dist, в которой находится сжатая версия вашего сайта.
источник
Чтобы развернуть ваше приложение в среде prod, добавьте
в ваших скриптах в файле package.json.
Откройте свой main.js и добавьте
сразу после вашего импорта. Затем откройте свой cli в папке проекта и запустите эту команду
Это создаст папку dist в каталоге вашего проекта, вы можете загрузить эту папку dist на свой хост, и ваш веб-сайт будет работать
источник
В документации по vue содержится много информации о том, как можно выполнить развертывание для разных провайдеров хоста.
Вы можете найти его в json-файле пакета. раздел скриптов. Он предоставляет сценарии для тестирования, разработки и сборки для производства.
Вы можете использовать такие службы, как netlify, которые объединят ваш проект, подключив репозиторий проекта на github со своего сайта. Он также предоставляет информацию о том, как развернуть на других сайтах, таких как heroku.
Вы можете найти более подробную информацию об этом здесь
источник
Эта команда предназначена для запуска сервера разработки:
Где эта команда для производственной сборки:
Обязательно загляните в созданную папку под названием «dist».
Затем начните отправлять все эти файлы на свой сервер.
источник
Один из способов сделать это без использования VUE-CLI - объединить все файлы сценариев в один толстый файл js, а затем указать этот большой толстый файл javascript в основном файле шаблона.
Я предпочитаю использовать webpack в качестве сборщика и создать webpack.conig.js в корневом каталоге проекта. Все конфигурации, такие как точка входа, выходной файл, загрузчики и т. Д., Хранятся в этом конфигурационном файле. После этого я добавляю сценарий в файл package.json, который использует файл webpack.config.js для конфигураций веб-пакетов, и начинаю просматривать файлы и создаю связанный файл Js в указанном месте в файле webpack.config.js.
источник
Я думаю, вы можете использовать vue-cli
Если вы используете Vue CLI вместе с серверной инфраструктурой, которая обрабатывает статические ресурсы как часть своего развертывания, все, что вам нужно сделать, это убедиться, что Vue CLI генерирует встроенные файлы в правильном месте, а затем следовать инструкциям по развертыванию вашей внутренней инфраструктуры. ,
Если вы разрабатываете интерфейсное приложение отдельно от бэкэнда, т. Е. Ваш бэкэнд предоставляет API для взаимодействия с вашим интерфейсом, то ваш интерфейс по сути является чисто статическим приложением. Вы можете развернуть собранный контент в каталоге dist на любом статическом файловом сервере, но убедитесь, что установлен правильный baseUrl
источник
npm run build - это сократит и минимизирует коды
сохраните index.html и папку dist в корневом каталоге вашего сайта.
бесплатный хостинг, который может вас заинтересовать - Firebase hosting.
источник
если вы использовали vue-cli и webpack при создании своего проекта.
вы можете использовать только
npm запустите команду build в командной строке, и она создаст папку dist в вашем проекте. Просто загрузите содержимое этой папки на свой ftp и готово.
источник
ЭТО ДЛЯ РАЗВЕРТЫВАНИЯ В ПОЛЬЗОВАТЕЛЬСКУЮ ПАПКУ (если вы хотите, чтобы ваше приложение не было в корне, например, URL / myApp /) - я долго искал этот ответ ... надеюсь, он кому-то поможет.
Получите VUE CLI по адресу https://cli.vuejs.org/guide/ и используйте сборку пользовательского интерфейса, чтобы упростить задачу. Затем в конфигурации вы можете изменить общедоступный путь на / любой / и связать его URL / что угодно.
Посмотрите это видео, в котором объясняется, как создать приложение vue с помощью интерфейса командной строки, если вам нужна дополнительная помощь: https://www.youtube.com/watch?v=Wy9q22isx3U
источник
Сначала установите Vue Cli глобально
Чтобы создать новый проект, запустите:
запустить vue
Vue CLI> = 3 использует тот же двоичный файл vue, поэтому он перезаписывает Vue CLI 2 (vue-cli). Если вам все еще нужна устаревшая функциональность vue init, вы можете установить глобальный мост:
Vue Init глобально
vue init теперь работает точно так же, как vue-cli@2.x
Приложение Vue Create
Запустить сервер разработчика
источник
Если вы хотите создать и отправить на свой удаленный сервер, вы можете использовать cli-service ( https://cli.vuejs.org/guide/cli-service.html ), вы можете создавать задачи для обслуживания, сборки и развертывания с некоторыми определенные плагины как
vue-cli-plugin-s3-deploy
источник