# nuxt cordova web ハイブリッドアプリ作成した時のメモ
# config file
nuxt.config.js
const pkg = require("./package");
module.exports = {
mode: "spa",
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: pkg.description },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [{ src: "cordova.js" }],
},
/*
** Customize the progress-bar color
*/
loading: { color: "#fff" },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
"@nuxtjs/axios",
// Doc: https://bootstrap-vue.js.org/docs/
"bootstrap-vue/nuxt",
],
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
publicPath: "/nuxt/",
},
router: {
mode: "hash",
},
};
- script: [{ src: "cordova.js" }]
cordova 依存 js: cordova ライブラリ使うために - publicPath: "/nuxt/"
publicPath デフォルト_nuxt から変更、_は認識されないため - router: { mode: "hash" }
route いじらないと cordova でうまく起動しない、/index.html 開くため - mode を spa にする
ssr 対応できないため
# npm run generate
nuxt ファイルを generate する
npm run generate
デフォルト dist ディレクトリに generate される
中身をコピーして cordova ディレクトリの www にコピー
# ファイル内容に/nuxt/から nuxt/に一括置き換え
/nuxt/ではうまく表示されない、ルートが違うため
# create project
cordova create cordova
cd cordova
# add platform
cordova platform add ios browser android
cordova run android
完了！
# java JDK インストール
Java SE Development Kit 8u211 (opens new window)
- linux
- macos
- windows
ダウンロードしてインストール
# android SDK インストール
Android Studio
ダウンロードしてインストール
# path 通す
ANDROID_HOME=C:\Users\xxxxx\AppData\Local\Android\Sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_211
PATH 追加
C:\Program Files\Java\jdk1.8.0_211\bin
C:\Users\xxxxx\AppData\Local\Android\Sdk\platform-tools
C:\Users\xxxxx\AppData\Local\Android\Sdk\tools