В последний период я решил изучить 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
Спасибо за чтение и наслаждайтесь своим приложением;)