Если ваше приложение Vue даже немного велико, Webpack упрощает управление им. Вы можете использовать boillerplate webpack, чтобы создать приложение vue и сразу же начать его работу. Он поставляется с множеством приятностей, таких как горячая перезагрузка с сохранением состояния, которая может на порядки ускорить разработку. Шутки в сторону!



vuejs-templates / webpack
webpack - полнофункциональная установка Webpack + vue-loader с горячей перезагрузкой, линтингом, тестированием и извлечением css. github.com



Теперь, когда пришло время развернуть ваше приложение, и если вы планируете сделать это на Heroku, есть несколько способов:

  1. В идеале вы хотели бы создать свое приложение локально, а затем отправлять только свои миниатюрные файлы из Heroku. Таким образом, размер вашего приложения минимален, а развертывание выполняется очень быстро.
  2. Один не очень хороший, но простой подход - позволить Heroku выполнить сборку за вас и обслуживать статические страницы из папки dist. Таким образом, вы можете просто нажать на Heroku, и если автоматическое развертывание включено, Heroku создаст ваше приложение для вас, а затем будет обслуживать файлы из созданной папки dist.

Предполагая, что вы использовали шаблон веб-пакета из Github, вот шаги, если вы хотите перейти к шагу 2:

1. Создайте server.js

Создайте файл в корне вашего приложения с именем server.js со следующим содержимым:

var express = require(‘express’);
var path = require(‘path’);
var serveStatic = require(‘serve-static’)
app = express();
app.use(serveStatic(path.join(__dirname, ‘dist’)));
var port = process.env.PORT || 5000;
app.listen(port);
console.log(‘server started ‘+port);

Эта конфигурация позволяет использовать экспресс-сервер для обслуживания статических файлов из папки «dist» в вашем приложении.

2. Добавьте скрипты сборки.

Теперь, как нам использовать только что созданный файл server.js? В файле «package.json» добавьте разделы «start» и «postinstall». Пост-установка выполняется Heroku перед запуском сервера. Мой раздел «scripts» выглядит так:

“scripts”: {
 “dev”: “node build/dev-server.js”,
 
 “build”: “rimraf dist && mkdirp dist && ncp static dist/static && cross-env NODE_ENV=production webpack — progress — hide-modules — config build/webpack.prod.conf.js”,
 
 “postinstall”: “npm run build”,
 
 “start”: “node server.js”
 },

Скрипты dev и build по умолчанию поставляются с шаблоном webpack. postinstall просто запускает сценарий сборки после установки, а start использует файл server.js, который мы создали ранее, для сервера созданного приложения.

3. Создавайте локально.

Убедитесь, что все зависимости были добавлены в package.json с помощью «npm install XX - save», и попробуйте собрать приложение локально, чтобы убедиться, что установка будет работать на Heroku:

$ rm -rf node_modules
$ npm install --quiet --production
$ npm start

Это вызовет те же команды, что и Heroku при развертывании вашего приложения. Если все пойдет хорошо, вы сможете нажать на Heroku, и ваше приложение будет обслуживаться после сборки.

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

Обновление (18.05.2016): это не планировалось ранее, но позже я написал еще один пост, чтобы описать, как вы можете развернуть свое приложение с помощью 1-го способа (отправьте только приложение сборки в Heroku).