В последний период я ​​решил изучить Vue.js, потому что чувствую необходимость в первом подходе к одностраничным приложениям. Лучший способ изучить этот фреймворк - создать реальное приложение, такое как расширенный список задач или другое приложение, имеющее смысл. По этой причине я решил интегрировать свое первое приложение Vue.js с Cordova, чтобы создать гибридное приложение для iOS и Android.

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

Перед тем как начать, вы должны знать, что для продолжения вам потребуется установщик npm (менеджер пакетов узлов) и Webpack. Если вы ничего об этом не знаете, загляните в их документацию.

Готовы? Поехали!

Итак, прежде всего, откройте Терминал и установите интерфейс командной строки vue и Cordova глобально с помощью npm.

npm install -g cordova
npm install -g vue-cli

Легко, правда? Теперь вам нужно создать новое приложение Cordova и проект Vue.js на основе шаблона Webpack, поэтому просто выполните следующие команды:

cordova create project-name
vue init webpack project-name

Терминал спросит вас: «Целевой каталог существует. Продолжать?" потому что каталог проекта уже существует, потому что он был создан на предыдущем шаге Cordova. «Да» будет правильным ответом. После процедуры инициализации вам необходимо удалить все файлы в папке www, прежде чем продолжить.

Хорошо! Вы установили все необходимое. Хлопает тебе в ладоши.

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

Итак, начнем с root. Откройте файл index.html и внесите следующие изменения:

<html>
  <head>
    <meta charset=”utf-8">
    <meta name=”format-detection” content=”telephone=no”>
    <meta name=”msapplication-tap-highlight” content=”no”>
    <meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>
    <meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *; img-src ‘self’ data: content:; connect-src ‘self’ ws:;”>
    <title>Project Name</title>
    <script src=”cordova.js”></script>
  </head>
  <body>
    <div id=”app”></div>
    ...

Теперь вам нужно изменить путь назначения, чтобы переместить созданный проект в папку www cordova. Итак, откройте файл config / index.js и измените его следующим образом:

build: {
  index: path.resolve(__dirname, ‘../www/index.html’),
  assetsRoot: path.resolve(__dirname, ‘../www’),
  assetsSubDirectory: ‘static’,
  assetsPublicPath: ‘’
}

И последнее, но не менее важное: измените имя, автора и значения описания в config.xml.

Прежде чем объяснять вам, как создать приложение и протестировать его на ваших устройствах, я хочу сделать вам подарок. Я потратил много времени, чтобы понять, как решить две проблемы, и мой дар - это решение.

Проблемой являются пользовательские шрифты и проблема минификации js.

Если вы хотите использовать собственный шрифт в своем приложении, вам необходимо изменить параметр в файле build / webpack.base.conf.js. Если это ваш случай, просто откройте файл, найдите модуль webpack test о шрифтах и ​​добавьте параметр publicPath:

publicPath: process.env.NODE_ENV === ‘production’ ? ‘../../’ : ‘/’

Конечный результат решения проблемы с загрузкой шрифтов будет следующим:

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
  limit: 10000,
  name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’),
  publicPath: process.env.NODE_ENV === ‘production’ ? ‘../../’ : ‘/’
}

Вторая проблема - это проблема минификации js. Это ошибка в производственном режиме:

SyntaxError: Cannot declare a let variable twice: ‘e’

Webpack использует плагин UglifyJs для минимизации js-кода, но есть небольшая проблема ... SAFARI v10! Чтобы лучше понять, прочтите этот выпуск GitHub.

Чтобы решить эту проблему, вам необходимо изменить параметры UglifyJsPlugin следующим образом:

new UglifyJsPlugin({
 uglifyOptions: {
  safari10: true,
  compress: {
   warnings: false
  }
 },
 ...
})

Добавьте нужные платформы

После этих исправлений вам необходимо добавить целевые платформы с помощью интерфейса командной строки Cordova.

cordova platform add [email protected] —-save
cordova platform add ios --save

Примечание для Android: я предлагаю использовать версию 6.x.x, чтобы повысить совместимость плагинов Cordova.

Если вы используете управление версиями Git, я предлагаю вам игнорировать папки подключаемые модули, платформы и www после этой операции.

Стройте и тестируйте!

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

npm run build
cordova build android
cordova build ios

А теперь… БЕГ!

cordova run ios — device
cordova run android — device

Спасибо за чтение и наслаждайтесь своим приложением;)