Что мне делать после разработки Vue- приложения с vue-cli
?
В Angular была некоторая команда, которая связывает все сценарии с одним скриптом, а затем эти файлы отправляются на хост.
Есть что-то такое же в Vue?
Что мне делать после разработки Vue- приложения с vue-cli
?
В Angular была некоторая команда, которая связывает все сценарии с одним скриптом, а затем эти файлы отправляются на хост.
Есть что-то такое же в Vue?
Я думаю, вы создали свой проект следующим образом:
vue init webpack myproject
Ну, теперь вы можете запускать
npm run build
Скопируйте index.html и /dist/папку в корневой каталог вашего сайта. Готово.
Если вы создали свой проект, используя:
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" ]
в вашем терминале
npm run build
и вы размещаете папку dist. для более подробной информации смотрите это видео
Если у вас возникли проблемы с вашим путем, возможно, вам нужно изменить assetPublicPath
в файле config/index.js
в ваш подкаталог:
Один из способов сделать это, не используя VUE-CLI, - это объединить все файлы сценариев в один файл fat js, а затем ссылаться на этот большой файл javascript в основной файл шаблона.
Я предпочитаю использовать webpack в качестве связующего и создать webpack.conig.js в корневой директории проекта. Все конфиги, такие как точка входа, выходной файл, загрузчики и т.д., Хранятся в этом файле конфигурации. После этого я добавляю скрипт в файл package.json, который использует файл webpack.config.js для конфигураций webpack и запускает просмотр файлов и создает связанный файл Js в указанное место в файле webpack.config.js.
если вы использовали vue-cli и webpack при создании проекта.
Вы можете использовать только
npm запустите команду build в командной строке, и она создаст папку dist в вашем проекте. Просто загрузите содержимое этой папки на ваш ftp и готово.
Команды для выполнения конкретных кодов перечислены в вашем файле package.json в разделе сценарии. Вот мой пример:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
Если вы хотите запустить свой сайт локально, вы можете проверить его с помощью
npm serve
Если вы хотите подготовить свой сайт к производству, вы должны использовать
npm build
Эта команда создаст папку dist, которая содержит сжатую версию вашего сайта.
Это для размещения на пользовательской папке (если вы хотите, чтобы ваше приложение не было в корне, например, URL/myApp/) - я долго искал этот ответ... надеюсь, он кому-нибудь поможет.
Получите VUE CLI на https://cli.vuejs.org/guide/ и используйте сборку пользовательского интерфейса, чтобы упростить его. Затем в конфигурации вы можете изменить публичный путь на /what/и указать ссылку на него /what.
Посмотрите это видео, в котором объясняется, как создать приложение vue с помощью CLI, если вам нужна дополнительная помощь: https://www.youtube.com/watch?v=Wy9q22isx3U
Эта команда предназначена для запуска сервера разработки:
npm run dev
Где эта команда предназначена для сборки сборки:
npm run build
Обязательно посмотрите и зайдите в созданную папку под названием "dist".
Затем запустите все эти файлы на свой сервер.
Я думаю, что вы можете использовать Vue-Cli
Если вы используете Vue CLI вместе с бэкэнд-каркасом, который обрабатывает статические ресурсы как часть своего развертывания, все, что вам нужно сделать, это убедиться, что Vue CLI генерирует встроенные файлы в правильном месте, а затем следуйте инструкциям по развертыванию вашей бэкэнд-каркаса,
Если вы разрабатываете свое приложение веб-интерфейса отдельно от своего бэкэнда - т.е. Ваш бэкэнд предоставляет API-интерфейс для взаимодействия с вашим веб-интерфейсом, то ваш веб-интерфейс по сути является чисто статическим приложением. Вы можете развернуть встроенный контент в каталоге dist на любом статическом файловом сервере, но не забудьте установить правильный baseUrl
npm run build - это приведет к уменьшению и уменьшению кодов
сохраните index.html и папку dist в корневой директории вашего сайта.
бесплатный хостинг, который может вас заинтересовать - хостинг Firebase.
Если вы хотите собрать и отправить на удаленный сервер, вы можете использовать cli-service (https://cli.vuejs.org/guide/cli-service.html), вы можете создавать задачи для обслуживания, сборки и развертывания с некоторыми конкретные плагины как vue-cli-plugin-s3-deploy
Иногда вы можете увидеть 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
.
Лучший и самый чистый способ сделать это - импортировать проект на свой сервер и запустить npm run build
с вашего серверного терминала после установки всех модулей и зависимостей вашего проекта. Позднее вы можете создать некоторый скрипт на вашем package.json
и дать ему команду, например, npm run deploy
чтобы автоматически развертывать с вашей локальной машины.
Таким образом, у вас не будет проблем с vue-router
(если вы не настроили проект правильно), а также не нужно "переместить ваш index.html и /dist/folder".