Що мені робити після розробки програми 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/каталог.

Докерфайл

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;

відразу після вашого імпорту. Потім відкрийте свій кліп у папці проекту та запустіть цю команду

npm run build

Це зробить папку dist у вашому каталозі проекту, ви можете завантажити цю папку dist у своєму хості, і ваш веб-сайт буде опублікований

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

npm run dev

Де ця команда призначена для нарощування виробництва:

npm run build

Переконайтеся, що загляньте та перейдіть до створеної папки під назвою "dist".
Потім почніть відсувати всі ці файли на свій сервер

Один із способів зробити це без використання VUE-CLI - зв'язати всі файли сценаріїв в один файл js-жиру, а потім посилати цей великий файл JavaScript-жиру в основний файл шаблону.

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

Я думаю, ви можете використовувати vue-cli

Якщо ви використовуєте Vue CLI разом із базовою рамкою, яка обробляє статичні активи як частину його розгортання, все, що вам потрібно зробити, це переконатися, що Vue CLI генерує вбудовані файли у правильному місці, а потім дотримуйтесь інструкції щодо розгортання вашої бекенд-фреймворку .

Якщо ви розробляєте додаток для frontend окремо від вашого бекенда - тобто ваш бекенд розкриває API для вашого фронтенду, щоб поговорити, то ваш frontend є по суті чисто статичним додатком. Ви можете розгорнути вбудований вміст у директорії dist на будь-якому сервері статичних файлів, але обов'язково встановіть правильний baseUrl

1. npm run build - це зменшить і мінімізує коди

2. збережіть index.html та dist папку у кореневому каталозі вашого веб-сайту.

3. безкоштовний хостинг-сервіс, який може вас зацікавити - хостинг Firebase.

якщо під час створення проекту ви використовували vue-cli та webpack.

ви можете використовувати просто

npm запустити команду build у командному рядку, і це створить dist папку у вашому проекті. Просто завантажте вміст цієї папки у свій ftp і готово.

ЦЕ ДЛЯ ЗАВДАННЯ ДО МИТНИХ ПАПАНІВ (якщо ви хотіли, щоб ваш додаток не було кореневим, наприклад, URL / myApp /) - я довго шукав цю відповідь ... сподіваюся, що це комусь допоможе.

Отримайте VUE CLI за адресою https://cli.vuejs.org/guide/ та скористайтеся побудовою інтерфейсу, щоб зробити його легшим. Тоді в конфігурації ви можете змінити загальнодоступний шлях на / що завгодно / і посилання на нього URL / що завгодно.

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

Документація vue надає багато інформації про те, як можна розгортатися до різних хост-провайдерів.

npm run build

Ви можете знайти це з файлу json пакета. розділ сценаріїв. Він надає сценарії для тестування та розробки та створення для виробництва.

Ви можете скористатись такими послугами, як netlify, які поєднатимуть ваш проект, пов’язавши ваш github repo проекту зі своїм сайтом. Він також надає інформацію про те, як розгорнути на інших сайтах, таких як heroku.

Більш детальну інформацію про це можна знайти тут

Спочатку встановіть Vue Clive в усьому світі

npm install -g @vue/cli

Щоб створити новий проект, запустіть:

vue create project-name

run 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 App

vue init webpack my-project

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

npm run dev

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