Что мне делать после разработки приложения Vuevue-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файле подкаталог:

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

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

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

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

npm serve

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

npm build

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

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

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

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

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

Vue.config.productionTip = false;

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

npm run build

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

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

npm run build

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

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

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

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

npm run dev

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

npm run build

Обязательно загляните в созданную папку под названием «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

1. npm run build - это сократит и минимизирует коды

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

3. бесплатный хостинг, который может вас заинтересовать - 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 глобально

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

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